「折腾」在 VSCode 中连接调试 Microsoft Edge

吐槽/反馈/建议:我的咸鱼心  爱发电-@wdssmq

就。。久违的水文。。。

终于稍微研究了下「Microsoft Edge Tools for VS Code」这个 VSCode 扩展怎么用,重点是能否实现我预期的使用姿势;

写「GM_脚本」比较多,用 rollup 实现了相应的打包及 dev 模式热更新,所以调试的目标非本地,然后也需要浏览器开启所需的扩展;

姑且是双显示器,然而习惯把浏览器的 DevTools 独立出来,所以常驻窗口有三个,所以就希望让 VSCode 承担 DevTools 的功能,作为标签页的形式存在。

目测是可以实现的。。

「- -」「- -」「- -」「- -」

方式一

  1. 安装「Microsoft Edge Tools for VS Code」扩展;
  2. 使用 msedge.exe --remote-debugging-port=9222 命令启动 Edge 浏览器;(图 ①)
    - 可访问 http://localhost:9222/json/list 查看开启效果,也可根据下一步操作来验证;
    - 如果不能访问,需要结束所有 Edge 进程,然后重试启动命令;
  3. 在 VSCode 中进入 Microsoft Edge Tools 面板;(图 ②)
    - 点击 Refresh Targets 按钮以连接或刷新目标;
    - 如果连接成功,可在要调试的目标页面上「右键」相应选项以打开 DevTools;

图①↓

图 ①

图②↓

图 ②

「- -」「- -」「- -」「- -」

方式二

也可以生成 launch.json 配置文件,在 VSCode 中直接启动 Edge 浏览器并实现 DevTools 的连接;(图 ③

:在已经配置好 launch.json 后,不要使用「Edge Tools」中的 Launch Project 按钮执行,而是在「运行和调试」面板中选取相应的配置进行启动。

图 ③

下边是完整的配置参考,presentation.hidden 用于控制是否在「运行和调试」面板中显示该命令项,「启动 edge」和「打开 DevTools」是两个步骤,在 compounds 中组合执行;

这种方式启动的 Edge 窗口使用独立的「user-data」目录,需要单独安装扩展之类的,好像对于开发来说也不错,和日常使用隔离开,然后不会频繁出现连接问题。

{
    "configurations": [
        {
            "type": "msedge",
            "name": "Launch Microsoft Edge",
            "request": "launch",
            "url": "https://bing.com",
            "runtimeArgs": [
                "--remote-debugging-port=9222"
            ],
            "presentation": {
                "hidden": true
            }
        },
        {
            "type": "msedge",
            "name": "Launch Microsoft Edge in headless mode",
            "request": "launch",
            "url": "https://bing.com",
            "runtimeArgs": [
                "--headless",
                "--remote-debugging-port=9222"
            ],
            "presentation": {
                "hidden": true
            }
        },
        {
            "type": "vscode-edge-devtools.debug",
            "name": "Open Edge DevTools",
            "request": "attach",
            "url": "https://bing.com",
            "presentation": {
                "hidden": true
            }
        }
    ],
    "compounds": [
        {
            "name": "Edge & DevTools",
            "configurations": [
                "Launch Microsoft Edge",
                "Open Edge DevTools"
            ]
        },
        {
            "name": "Edge Headless & DevTools",
            "configurations": [
                "Launch Microsoft Edge in headless mode",
                "Open Edge DevTools"
            ]
        }
    ]
}


爱发电

本文标题:《「折腾」在 VSCode 中连接调试 Microsoft Edge》作者:沉冰浮水
原文链接:https://www.wdssmq.com/post/20100318790.html
特别注明外均为原创,转载请注明。

分享到微信

扫描二维码

可在微信查看或分享至朋友圈。

相关文章

囧啊囧 囧啊囧 发布于 2010-11-16 20:24:56  
#cmt299
这学期你该科不及格
回复
老白 老白 发布于 2010-03-18 16:01:50  
#cmt298
老师镇不住学生,杯具了
回复
发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

网站分类

  • 订阅本站的 RSS 2.0 新闻聚合

搜索

本周旧文

《忍者与杀手》——出生是事实,在此基础上,感觉比《鹿乃子》好看;一个靠不当人拔高了抽象,另一个本身就不是人(也不是鹿),单论抽象鹿乃子更高,然而就是不好看。。

nuc 四个口插硬盘都识别不到,有亮灯。。最后试出别插到底。。

绿联的硬盘盒。。另外一个联想的没问题。。

近期观影记录:超级马里奥,死侍与金刚狼。。

搬家也告一段落,虽然搬过来的东西还得归置,新衣柜虽说已经散俩月味儿了,但还是不想放衣服进去。

要不我每年汇总整理一次??碎雨集_沉冰浮水_第1页

所以,不带这条的话,2024 年目前只发了 13 条嘟????

VSCode 内 git 操作卡住的时候没办法主动取消一直是个痛点,一般都是推送或拉取,今天连提交都卡了。。

又一个夏天过去了,所以今年也没买防水鞋套;然后天凉了,为了应对踢被子买了睡袋,不知道 1.2 米会不会略窄。。

《五至七时的克莱奥》,2018 年 6 月加入列表,21 年 11 月底发现 B 站上线了这部,直到前几天才看完,还是分两次看的。。接下来有五项是 2019 年的,都是电影 —— 略长的待办列表。。

有用程序自动抓取自己带 tag 的嘟,然后按年备份后从线上删除;刚发现去年的数据有备份但是没删线上??和本地数据对比后发现线上的还少一条,Why??

最新留言

友情链接