VS Code 新扩展，面向 Web 开拓职员调试 DOM

微软项目司理 Paul Gildea  发博说，他们针对 Web 开拓职员，宣布了一个新的 VS Code 扩展—— Elements for Microsoft Edge，这个扩展照旧一个预览版，目标是闪开拓者更好地在赏识器器材和编辑器中操纵和调试 HTML 和 CSS 的题目。

对 Web 开拓职员来说，当在 DevTools 和 IDE 之间中完成沟通的使命时，差异的事变流混在一路会认为很不利便，以是 Paul Gildea 提出三方面改造：

• 在 DevTools 中修改 CSS 时，快速将变动更新到源代码
• 在 DevTools 中对 HTML/CSS 举办多次修改时，低落丢失变动的也许性
• 快速对源代码举办变动，并在赏识器中看到该变动

Elements for VS Code 扩展就是简化事变流的第一步，从 VS Code 中直接搜查和调试 DOM，并及时查察变动对页面的影响。

假如想要安装 Elements for Microsoft Edge 扩展，起首安装 Microsoft Edge 的 Dev 或 Canary 版本，然后从 VS Code 市场安装 Elements for Microsoft Edge VS Code 扩展，两个安装完毕后，在 VS Code 中打开事变项目，之后会在侧栏看到一个新的图标：

单击这个图标将会进入方针列表，该列表将表现 Microsoft Edge 的任何可调试实例。假如当前没有可调试的实例，则可以单击 + 按钮启动新实例并将其附加到个中。可能，可以在 Launch.json 文件中行使使命，就像行使其他范例的调试器扩展一样。

添加赏识器实例将打开新元素器材面板，表现站点或应用措施的 HTML 文档布局和 CSS 样式信息，如下图，假如常常行使 Microsoft Edge DevTools 或其他 Chromium 驱动的赏识器器材，应该认识这个视图。

要在元素扩展中查察网站的及时视图，只需按下“Toggle Screencast”按钮即可，这个视图将在对 CSS 和 HTML 举办变动时及时更新，因此不必分开 VS Code 来查察变动环境。

Paul Gildea 还暗示不规划将 Microsoft Edge DevTools 从赏识器中完全迁徙到 IDE 中。

查察示例或反馈题目地点：

https://github.com/microsoft/vscode-edge-devtools

【编辑保举】

1. HTML5开拓者：10个开拓便利快捷的小器材
2. 微软公布开源量子开拓器材包
3. 这是谁写的代码，给我站出来，担保不打死你！
4. 开拓职员爱Docker的10个来由
5. Golang 到底姓什么？开拓者想移除谷歌 logo

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!