vscode使用chrome调试报错

﹏ヽ暗。殇╰゛Y 2022-12-20 03:26 283阅读 0赞

### 目录 ###

*  1. 修改chrome浏览器属性
 *  2. 设置chrome启动页
 *  3. 效果
 *  参考

# 1. 修改chrome浏览器属性 #

先在其快捷方式右键选属性，在“目标”字段中，追加–remote-debugging-port=9222（追加前要放个空格），我一开始改了无法保存，需要先去掉只读这个勾，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 1]  
修改好之后，测试一下能否使用本地chrome调试，如果不可以，还报错，那就接着走步骤二：

# 2. 设置chrome启动页 #

启动浏览器，如果浏览器默认打开的页面不是about:blank，会弹框报错，需要设置，如下图，设置好之后，关掉浏览器，重新打开：  
注意：第一步设置好后可以正常调试，那就不用把浏览器启动页设置为about:blank  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 2]

# 3. 效果 #

到现在为止，已完成配置！选择html页面，点击调试按钮，选好使用本机Chrome调试即可，如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 3]

# 参考 #

*  [vscode(Visual Studio Code)中安装Debugger for Chrome插件调试页面 - 北倍 - 博客园 https://www.cnblogs.com/lulu-beibei/p/10881675.html][vscode_Visual Studio Code_Debugger for Chrome_ - _ - _ https_www.cnblogs.com_lulu-beibei_p_10881675.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/9e4e152fa3e841809d1eacafcd690c15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/5be07f39db294376b4ae95648f47d968.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/2020111016050433.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201110160819556.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70#pic_center
[vscode_Visual Studio Code_Debugger for Chrome_ - _ - _ https_www.cnblogs.com_lulu-beibei_p_10881675.html]: https://www.cnblogs.com/lulu-beibei/p/10881675.html