设为首页 - 加入收藏 汉中大乐透机选倍投一注 (http://www.0916zz.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 2019 什么 学习 平台
当前位置: 首页 > 综合聚焦 > 移动互联 > 评测 > 正文

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

发布时间:2019-07-18 09:26 所属栏目:[评测] 来源:afterer
导读:微软项目经理Paul Gildea 发博说,他们针对 Web 开发人员,发布了一个新的 VS Code 扩展Elements for Microsoft Edge,这个扩展还是一个预览版,目的是让开发者更好地在浏览器工具和编辑器中操作和调试 HTML 和 CSS 的问题。 对 Web 开发人员来说,当在 De

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

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

  • 在 DevTools 中修改 CSS 时,快速将更改更新到源代码
  • 在 DevTools 中对 HTML/CSS 进行多次修改时,降低丢失更改的可能性
  • 快速对源代码进行更改,并在浏览器中看到该更改

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

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 中打开工作项目,之后会在侧栏看到一个新的图标:Elements for Microsoft Edge icon

单击这个图标将会进入目标列表,该列表将显示 Microsoft Edge 的任何可调试实例。如果当前没有可调试的实例,则可以单击 +?按钮启动新实例并将其附加到其中。或者,可以在 Launch.json 文件中使用任务,就像使用其他类型的调试器扩展一样。

添加浏览器实例将打开新元素工具面板,显示站点或应用程序的 HTML 文档结构和 CSS 样式信息,如下图,如果经常使用 Microsoft Edge DevTools 或其他 Chromium 驱动的浏览器工具,应该熟悉这个视图。

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

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

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

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

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

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

【编辑推荐】

  1. HTML5开发者:10个开发便利快捷的小工具
  2. 微软宣布开源量子开发工具包
  3. 这是谁写的代码,给我站出来,保证不打死你!
  4. 开发人员爱Docker的10个理由
  5. Golang 到底姓什么?开发者想移除谷歌 logo
【责任编辑:张燕妮 TEL:(010)68476606】
点赞 0

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章