微软项目经理 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
【编辑引荐】
HTML5开发者:10个开发便利快捷的小工具
微软宣布开源量子开发工具包
这是谁写的代码,给我站出来,保证不打死你!
开发人员爱Docker的10个理由
Golang 究竟姓什么?开发者想移除谷歌 logo
(责任编辑:admin)