微软Visual Studio Code新扩展:面向 Web 开发人员调试 DOM

  • 时间:
  • 浏览:1
  • 来源:10分赛车平台-1分赛车投注平台_3分彩娱乐平台

微软项目经理 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