快捷搜索:

您的位置:澳门新葡4473网站 > 澳门新葡4473网站 > 微软发布VS Code新扩展 面向Web开发人员调试DOM

微软发布VS Code新扩展 面向Web开发人员调试DOM

发布时间:2020-04-21 19:31编辑:澳门新葡4473网站浏览(186)

    对 Web 开发人员来说,当在 DevTools 和 IDE 之间中完成相同的任务时,不同的工作流混在一起会觉得很不方便,所以 Paul Gildea 提出三方面改进:

    微软项目经理Paul Gildea发博说,他们针对Web开发人员,发布了一个新的VS Code扩展——Elements for Microsoft Edge,这个扩展还是一个预览版,目的是让开发者更好地在浏览器工具和编辑器中操作和调试HTML和CSS的问题。

    • 在 DevTools 中修改 CSS 时,快速将更改更新到源代码

    • 在 DevTools 中对 HTML/CSS 进行多次修改时,降低丢失更改的可能性

    • 快速对源代码进行更改,并在浏览器中看到该更改

    对Web开发人员来说,当在DevTools和IDE之间中完成相同的任务时,不同的工作流混在一起会觉得很不方便,所以Paul Gildea提出三方面改进:

    Elements for VS Code 扩展就是简化工作流的第一步,从 VS Code 中直接检查和调试 DOM,并实时查看更改对页面的影响。

    在DevTools中修改CSS时,快速将更改更新到源代码

    如果想要安装 Elements for Microsoft Edge 扩展,首先安装 Microsoft Edge 的

    在DevTools中对HTML/CSS进行多次修改时,降低丢失更改的可能性

    要在元素扩展中查看网站的实时视图,只需按下“Toggle Screencast”按钮即可,这个视图将在对 CSS 和 HTML 进行更改时实时更新,因此不必离开 VS Code 来查看更改情况。

    快速对源代码进行更改,并在浏览器中看到该更改

    Paul Gildea 还表示不打算将 Microsoft Edge DevTools 从浏览器中完全迁移到 IDE 中。

    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中。

    查看示例或反馈问题地址:

    本文由澳门新葡4473网站发布于澳门新葡4473网站,转载请注明出处:微软发布VS Code新扩展 面向Web开发人员调试DOM

    关键词:

上一篇:最热门的13个Java微服务框架

下一篇:没有了