VS Code 新扩展,面向 Web 开发人员调试 DOM
微软项目经理 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 中。
查看示例或反馈问题地址:
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
新商标表明华为鸿蒙系统在海外或叫做“Harmony OS”
本月早些时候在接受法国新闻周刊杂志《观点》(Le Point)采访的时候,余承东表示鸿蒙系统将会在今年年底之前在中国市场上推出,而全球市场推广可能会等到2020年的第一季度。2019年6月华为已经为这款即将到来的操作系统申请了多个商标,包括“HongMeng OS”、“HMOS”(鸿蒙的拼音首字母)和“Ark OS”。为此很多人猜测“Ark OS”会成为鸿蒙系统在国际市场上线之后的正式名称。 不过在2019年7月12日华为向欧盟知识产权局(EUIPO)申请了又一项新专利,这次的名字叫做“Harmony”(和谐)。该申请被归类为第9类,并附有说明:“移动操作系统;电脑操作系统;可下载的操作系统程序”。 该商标由华为委托德国慕尼黑的Forresters事务所提交,这家事务所此前已经负责为华为申请了多项商标名称,包括“Hongmeng”以及最近推出的华为“P Smart Z”。 在7月12日的《2018年可持续发展报告》报告会上,华为董事长梁华表示,鸿蒙系统是为物联网开发的,用于自动驾驶、远程医疗等低时延场景。华为手机还是把开放的安卓系统和生态作为首选,如果美国不允许华为使用安卓,华为是否会...
- 下一篇
OSChina 周日乱弹 —— 妹子是国家战略资源啊
Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @Sharon啊 :#今日歌曲推荐# 分享Alan Walker/K-391/Emelie Hollow的单曲《Lily》我看到了一个巨人 《Lily》- Alan Walker/K-391/Emelie Hollow 手机党少年们想听歌,请使劲儿戳(这里) @小鱼丁 :人太多,近距离观看司机师傅开车 @小小编辑:别摁旁边的那些摁钮……不听话的都弹射出去了。 做公交的时候看看新闻, 漫天的都是山东大学学伴新闻。 @傻傻躺着:这事是真的吗 昂, 现在基友之间互怼节奏都不一样了。 @var_- :以前调侃基友:给你介绍个女朋友?做什么的?养生的……现在:给你介绍个女朋友?哪个学校毕业的?山东大学… 这个能忍啊? 怼回去! 骂他! @黑子鱼咖 :你老婆山大本硕连读.jpg 山大自己的公关不在乎, 他们这么回复的。 @yaoyee :各位老铁感受下山大的公关 这个回怼, 其实吐槽之力挺高的。 和你们打广告的水平差不多。 @大賢者 :山大学伴舞会的广告:男帅女美别犹豫,一见钟情心相许,国际交流开眼界 感觉你们的关注点不对劲, 巴叔(@巴拉迪维...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS6,CentOS7官方镜像安装Oracle11G
- CentOS7安装Docker,走上虚拟化容器引擎之路
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- Hadoop3单机部署,实现最简伪集群
- Docker安装Oracle12C,快速搭建Oracle学习环境
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装