最近换了下编辑器,改用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. 【目标检测】用Fast R-CNN训练自己的数据集超详细全过程

    目录: 一.环境准备 二.训练步骤 三.测试过程 四.计算mAP 寒假在家下载了Fast R-CNN的源码进行学习,于是使用自己的数据集对这个算法进行实验,下面介绍训练的全过程. 一.环境准备 我这里 ...

  2. Excel小技巧之VLOOKUP()使用简单说明

    前两天人事的小姐姐需要处理一个表格,需要在一张新表中的匹配旧表的数据,由于数据量较大不知如何处理. 我告诉她使用VLOOKUP()函数,然后她不知道怎么使用.其实我也不大用,因为数据库用的多很少使用表 ...

  3. 将springboot项目部署到服务器的tomcat中无法访问

    第一步:让启动类继承SpringBootServletInitializer,并重写configure方法,关键代码如下 @SpringBootApplication public class MyS ...

  4. docker仓库之分布式harbor (一)

    1.harbor介绍 harbor是一个用于存储和分发docker镜像的企业级Registry服务器,由VMware开源.其通过添加一些企业必须的功能特性,例如安全,标识和管理,扩展了开源docker ...

  5. centos7 SNMP错误记录

    如果本地测试ok,远程测试出现如下报错: No Such Object available on this agent at this OID或No more variables left in th ...

  6. python使用requests模块下载文件并获取进度提示

    一.概述 使用python3写了一个获取某网站文件的小脚本,使用了requests模块的get方法得到内容,然后通过文件读写的方式保存到硬盘同时需要实现下载进度的显示 二.代码实现 安装模块 pip3 ...

  7. 分布式实时处理系统——C++高性能编程

    [前言]基于通信基础,介绍Hurricane实时处理系统的工程实现,主要使用C++语言. 一.IPC.socket.异步I/O epoll 二.C++11 1.linux内存管理中使用RALL原则,C ...

  8. 几种常见css布局

    单列布局 第一种 给定宽度,margin:auto 即可实现 html <div class="header"></div> <div class=& ...

  9. 追溯 MySQL Statement Cancellation Timer

    原文 1. 背景 在 jstack 的内容中可以看到以下的 MySQL Statement Cancellation Timer 守护线程, 在业务高峰期的时候会出现大量的这类守护线程, 由此追溯该线 ...

  10. 关于MarkDown语法

    Markdown语法 码云笔记链接:https://gitee.com/out_of_zi_wen/practical-experience/blob/master/Markdown%E8%AF%AD ...