VS Code 新扩展，面向 Web 开发人员调试 DOM

"\u003Cdiv\u003E\u003Cp\u003E微软项目经理 Paul Gildea 发博说，他们针对 Web 开发人员，发布了一个新的 VS Code 扩展—— Elements for Microsoft Edge，这个扩展还是一个预览版，目的是让开发者更好地在浏览器工具和编辑器中操作和调试 HTML 和 CSS 的问题。 \u003C\u002Fp\u003E\u003Cp\u003E对 Web 开发人员来说，当在 DevTools 和 IDE 之间中完成相同的任务时，不同的工作流混在一起会觉得很不方便，所以 Paul Gildea 提出三方面改进：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E在 DevTools 中修改 CSS 时，快速将更改更新到源代码\u003C\u002Fli\u003E\u003Cli\u003E在 DevTools 中对 HTML\u002FCSS 进行多次修改时，降低丢失更改的可能性\u003C\u002Fli\u003E\u003Cli\u003E快速对源代码进行更改，并在浏览器中看到该更改\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F056c29f407c04ac4bf3418aca3f2c7d3\" img_width=\"800\" img_height=\"490\" alt=\"VS Code 新扩展，面向 Web 开发人员调试 DOM\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EElements for VS Code 扩展就是简化工作流的第一步，从 VS Code 中直接检查和调试 DOM，并实时查看更改对页面的影响。\u003C\u002Fp\u003E\u003Cp\u003E如果想要安装 Elements for Microsoft Edge 扩展，首先安装 Microsoft Edge 的 Dev 或 Canary 版本，然后从 VS Code 市场安装 Elements for Microsoft Edge VS Code 扩展，两个安装完毕后，在 VS Code 中打开工作项目，之后会在侧栏看到一个新的图标：\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002Fb161313e460a4af8a80314f1744b5f25\" img_width=\"50\" img_height=\"42\" alt=\"VS Code 新扩展，面向 Web 开发人员调试 DOM\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E单击这个图标将会进入目标列表，该列表将显示 Microsoft Edge 的任何可调试实例。如果当前没有可调试的实例，则可以单击 + 按钮启动新实例并将其附加到其中。或者，可以在 Launch.json 文件中使用任务，就像使用其他类型的调试器扩展一样。\u003C\u002Fp\u003E\u003Cp\u003E添加浏览器实例将打开新元素工具面板，显示站点或应用程序的 HTML 文档结构和 CSS 样式信息，如下图，如果经常使用 Microsoft Edge DevTools 或其他 Chromium 驱动的浏览器工具，应该熟悉这个视图。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Faea1f7dc726d4a1998d8357be88765b7\" img_width=\"1115\" img_height=\"543\" alt=\"VS Code 新扩展，面向 Web 开发人员调试 DOM\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E要在元素扩展中查看网站的实时视图，只需按下“Toggle Screencast”按钮即可，这个视图将在对 CSS 和 HTML 进行更改时实时更新，因此不必离开 VS Code 来查看更改情况。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F91c09167cc2b434badb73ea8d1ccea5d\" img_width=\"1321\" img_height=\"644\" alt=\"VS Code 新扩展，面向 Web 开发人员调试 DOM\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EPaul Gildea 还表示不打算将 Microsoft Edge DevTools 从浏览器中完全迁移到 IDE 中。\u003C\u002Fp\u003E\u003Cp\u003E查看示例或反馈问题地址：\u003C\u002Fp\u003E\u003Cp\u003Ehttps:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fvscode-edge-devtools\u003C\u002Fp\u003E\u003Ch1\u003EPS\u003C\u002Fh1\u003E\u003Cpre\u003E文章转载自 OSCHINA 社区 [http:\u002F\u002Fwww.oschina.net]\u003Cbr\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E"

文章来源: https://www.toutiao.com/group/6715946217982919176/