最近换了下编辑器,改用vscode(Visual Studio Code),很喜欢它左边显示的文件路径,轻松新建文件夹和文件,也喜欢它的编码转换功能,gbk和utf-8可以随时切换,因为公司网站有些页面是utf-8有的是gbk2312,很多时候我都分开使用用2个编辑器,感觉从现在开始不用了,哈哈

很快就看到一个好用的拓展,可以在编辑器中设置断点,谷歌浏览器中调试代码,我很想要这个功能,但是我装了Debugger for Chrome后,按照百度出来的方法进行配置,屡屡报错,尝试了很久,终于在刚才配好了。感觉度娘上面的东西有时候写的还是太浅了。下面先说说我遇到的问题:

下面贴出详细步骤:

1:VSCode 上安装:Debugger for Chrome

2:vscode打开一个html,按F5,在弹出来的框中选择 Chrome,会自动打开launch.json文件

3.往launch.json中追加以下代码:

,
{
"name": "使用本机 Chrome 调试",
"type": "chrome",
"request": "launch",
"file": "${file}",
// "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安装路径
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"userDataDir":"${tmpdir}",
"port":9222
}

改完是这个样子:

这里需要注意的是参数runtimeExecutable,我注释掉了,不然会报错:

Chrome error: Error: spawn C:\Program Files (x86)\Google\Chrome\Application\chrome.exe EACCES

4:更改调试方式,选为我们新建的名称

5:启用Chrome并启用远程调试

先在其快捷方式右键选属性,在“目标”字段中,追加--remote-debugging-port=9222(追加前要放个空格),我一开始改了无法保存,需要先去掉只读这个勾,如下:

启动浏览器,如果浏览器默认打开的页面不是about:blank,会弹框报错,需要设置,如下图,设置好之后,关掉浏览器,重新打开:

到现在为止,已完成配置!选择html页面,点击调试按钮,选好使用本机Chrome调试即可,如图:

弄这个配置,我纳闷了好多天,终于搞好了。

vscode(Visual Studio Code)中安装Debugger for Chrome插件调试页面的更多相关文章

  1. 在linux系统中安装VSCode(Visual Studio Code)

    在linux系统中安装VSCode(Visual Studio Code) 1.从官网下载压缩包(话说下载下来解压就直接可以运行了咧,都不需要make) 访问Visual Studio Code官网  ...

  2. visual studio code 中 debugger for chrome 插件的配置

    安装 debugger for chrome 插件后,把默认的 launch.json 改成: { "name": "谷歌浏览器", "type&qu ...

  3. vscode: Visual Studio Code 常用快捷键

    vscode: Visual Studio Code 常用快捷键 主命令框 F1 或 Ctrl+Shift+P: 打开命令面板.在打开的输入框内,可以输入任何命令,例如: 按一下 Backspace ...

  4. 【转】vscode: Visual Studio Code 常用快捷键

    原文链接:https://www.cnblogs.com/bindong/p/6045957.html vscode: Visual Studio Code 常用快捷键 主命令框 F1 或 Ctrl+ ...

  5. Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题

    前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...

  6. Angular14 Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题、emmet安装

    前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...

  7. Visual Studio Code 中编写 C++ 的工作流

    1. 官网下载 Visual Studio Code ,安装.按提示安装 cpp 插件和 cmake 插件. 官网下载 CMake ,安装. 官网下载 Mingw ,安装. 安装 Mingw 时,注意 ...

  8. SharePoint Framework 在Visual Studio Code中调试你的本地解决方案

    博客地址:http://blog.csdn.net/FoxDave Visual Studio Code不知道大家都有没有,界面清爽,编辑快速,是一个非常好的前端开发工具.本文介绍如何使用Goog ...

  9. 如何在"Visual Studio Code"中使用" Git" 进行版本控制

    如何在"Visual Studio Code"中使用" Git" 进行版本控制 本来认为此类教程,肯定是满网飞了.今天首次使用VS Code的Git功能,翻遍了 ...

随机推荐

  1. rabbitMQ高可用方案

    普通模式 默认的集群模式,以两个节点(rabbit01.rabbit02)为例来进行说明.对于Queue来说,消息实体只存在于其中一个节点rabbit01(或者rabbit02),rabbit01和r ...

  2. flask启动常见问题1:sqlalchemy.exc.ArgumentError: Mapper mapped class UserCode->data_system_user_email could not assemble any primary key columns for mapped table 'data_system_user_email'

    我的描述:当我编辑好flask以后,ORM映射数据库完成,启动项目时,发生现象: 解决: 看字面的意思是主键导致的错误,于是我查看了data_system_user_email的键参数配置,发现表没有 ...

  3. 使用OkHttp和OkHttpGo获取OneNET云平台数据

    图1是OneNET官网关于NB-IoT文档关于批量查询设备最新数据的介绍,可以看到GET方法的URL地址和两个头部信息(图2是Htto请求消息结构).所以在写url时,还要添加两行头部字段名,不然获取 ...

  4. jenkins+docker+nginx+tomcat实现vue项目部署

    一.项目准备 1.新建一个vue的项目,确保能在浏览器正常访问.然后在项目的根目录下新建一个Dockerfile的文件,内容如下 FROM nginx COPY dist /usr/share/ngi ...

  5. WPF -- 一种直线识别方案

    本文介绍一种直线的识别方案. 步骤 使用最小二乘法回归直线: 得到直线方程y=kx+b后,计算所有点到直线的距离,若在阈值范围内,认为是直线. 实现 /// <summary> /// 最 ...

  6. 如何用Eggjs从零开始开发一个项目(3)

    上一篇中我们编写了用户注册登录.登录的代码,学习了如何进行用户的认证(JWT),如何安全地存储用的密码(hash).这一篇我们有以下2个任务: 获取token中的数据: 通过model来同步数据库. ...

  7. 手把手教你手写一个最简单的 Spring Boot Starter

    欢迎关注微信公众号:「Java之言」技术文章持续更新,请持续关注...... 第一时间学习最新技术文章 领取最新技术学习资料视频 最新互联网资讯和面试经验 何为 Starter ? 想必大家都使用过 ...

  8. 后端程序员之路 29、Thrift

    Apache Thrift是Facebook实现的一个高效的.支持多种编程语言的远程服务调用(RPC)框架. Apache Thrift - Homehttp://thrift.apache.org/ ...

  9. 漏洞复现-ActiveMq任意文件写入漏洞(CVE-2016-3088)

          0x00 实验环境 攻击机:Win 10 靶机也可作为攻击机:Ubuntu18 (docker搭建的vulhub靶场) 0x01 影响版本 未禁用PUT.MOVE等高危方法的ActiveM ...

  10. vue 仿zTree折叠树

    需求: vue实现仿zTree折叠树,此文章仅作为记录文档. 实现: <template> <div class="line-tree"> <div ...