<output id="ilehw"><bdo id="ilehw"><nobr id="ilehw"></nobr></bdo></output>
        <dl id="ilehw"><font id="ilehw"></font></dl>
          1. VS Code 新扩展,面向 Web 开发人员调试 DOM

            afterer
             afterer
            发布于 2019年07月14日
            收藏 52

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

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

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

            Screen capture showing the Elements for Microsoft Edge extension open in VS Code, with a live preview of a website open

            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 文?#21040;?#26500;和 CSS 样式信息,如下图,如果经常使用 Microsoft Edge DevTools 或其他 Chromium 驱动的浏览器工具,应该熟悉这个视图。

            Screenshot showing the Elements panel in Elements for Microsoft Edge

             

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

            Screen shot highlighting the "toggle screencast" button in Elements for Microsoft Edge

             

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

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

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

            本站文章除注明转载外,均为本站原创或编译。欢迎任何?#38382;?#30340;转载,但请务必注明出处,尊重他人劳动共创开源社区。
            转载请注明:文章转载自 OSCHINA 社区 [http://www.bswx.tw]
            本文标题:VS Code 新扩展,面向 Web 开发人员调试 DOM
            加载中

            精彩评论

            李惟
            李惟
            看不了,iOS端

            最新评论(14

            TonyJian
            TonyJian
            chrome的开发者工具不就能搞定了
            l
            lbfamous
            慢的要死了已经。。
            a_nuo
            a_nuo
            牛,又多了一个选择
            h
            h_Davy
            Dev 或 Canary 版本的 Edge 是基于 Chromium 内?#35828;?#21543;?
            meowtec
            meowtec
            这是把 chromium 的开发者工具移植过来了吧?
            iceworldvip
            iceworldvip
            微软的慈善项目
            平原君
            平原君
            这个真不错
            东胜神洲
            东胜神洲
            很好啊。。让 Microsoft Edge 成为每个网红应用的基础。。。Edge 成为老二指日可待。。
            MGL_TECH
            MGL_TECH
            iOS的调试,不然没用
            李惟
            李惟
            看不了,iOS端
            yywww
            yywww
            iOS端是什么意思,iOS有edge还是有vs code?
            李惟
            李惟
            osc ios端从消息中心打开看不了内容
            返回顶部
            顶部
            广东快乐十分实时开奖

                  <output id="ilehw"><bdo id="ilehw"><nobr id="ilehw"></nobr></bdo></output>
                  <dl id="ilehw"><font id="ilehw"></font></dl>

                            <output id="ilehw"><bdo id="ilehw"><nobr id="ilehw"></nobr></bdo></output>
                            <dl id="ilehw"><font id="ilehw"></font></dl>
                              1. 百宝彩福建11选5走势图 淘宝快3和值走势图 辽宁快乐12开奖结果走势图 彩票大奖 开乐彩中奖规则 11选5现场直播 发财报十红猛虎报图片 澳洲幸运5微信信誉群 买大乐透怎么选号 甘肃十一选五任7推荐号 快乐十分投注价格表 安徽时时彩快3奖金 6场半全场12139期 福建快3网上投注 波叔一一波中特