【免费下载】 VSCode Edge DevTools 使用教程

2026-01-18 09:38:33作者：丁柯新Fawn

A VSCode extension that allows you to use browser devtools from within the editor. The devtools will connect to an instance of Microsoft Edge giving you the ability to alter CSS styling, perform diagnostics, and debugging. Get it now at http://aka.ms/devtools-for-code

项目地址：https://gitcode.com/gh_mirrors/vs/vscode-edge-devtools

项目介绍

VSCode Edge DevTools 是一个由微软开发的开源项目，旨在将 Microsoft Edge 浏览器的开发者工具集成到 Visual Studio Code 中。通过这个扩展，开发者可以直接在 VS Code 环境中调试和分析网页，无需在浏览器和编辑器之间来回切换。

项目快速启动

安装扩展

打开 Visual Studio Code。
点击左侧的扩展图标（或按 Ctrl+Shift+X）。
在搜索框中输入 Edge DevTools。
找到 Microsoft Edge Tools for VS Code 扩展并点击安装。

启动 DevTools

打开一个 HTML 文件或启动一个本地服务器。
在 VS Code 的侧边栏中，点击 Microsoft Edge Tools 图标。
选择 Open a new tab 或 Attach to an existing tab。
如果选择 Open a new tab，输入要调试的 URL。
如果选择 Attach to an existing tab，选择一个已打开的 Edge 标签页。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调试示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            margin: 20px;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎使用 VSCode Edge DevTools</h1>
        <p>这是一个调试示例页面。</p>
    </div>
    <script>
        console.log("Hello from VSCode Edge DevTools!");
    </script>
</body>
</html>