切换至*繁体中文*

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

发布者:無名 / 2019-7-14 14:05:03/ [显示全部楼层] /只看大图 /倒序浏览 /阅读模式
查看: 403|回复: 0

[Win10软件应用] 微软Visual Studio Code新扩展:面向 Web 开发人员调试 DOM

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

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

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

1.jpg    

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

2.jpg    

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

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

3.jpg    

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

4.jpg    

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

查看示例或反馈问题地址: https://github.com/microsoft/vscode-edge-devtools

来源:开源中国  作者:afterer

免责声明:网站内的图片资料内容大部分取自于互联网,如果侵犯了原作者的权益请及时通知本站,或把邮件发送至(hsbk@hotmail.com),我们会在收到邮件的24小时内尽快删除。





上一篇:微软万亿美元市值稳不稳?全看云服务Azure
下一篇:Golang到底姓什么?开发者想移除谷歌Logo


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Title - Artist
0:00

    意见反馈|服務條款|隱私保护|小黑屋|手机版|古晋分享站

    JS of wanmeiff.com and vcpic.com Please keep this copyright information, respect of, thank you!JS of wanmeiff.com and vcpic.com Please keep this copyright information, respect of, thank you!

    网站运行:

      Powered by Discuz! X3.4

      © 2017-2020 kuchingshare.🇲🇾