程序员经验分享-hwhale

VSCode配置 Debugger for Chrome插件

2023-05-16

Debugger for Chrome这个插件是直接在vscode里面进行调试js文件，跟谷歌的控制台是一样的功能，下载了它就不用打开浏览器的控制台就能进行打断点。

首先在左侧扩展栏找到这个插件下载好了后重启编辑器之后配置

配置步骤如图：


图中配置字段信息解释如下：

  • version : 你定义这个配置文件的版本，生成的时候默认是0.2.0
  • configuration：配置域
  • name：配置文件的名字，可以自己起
  • type：调试的类型，node是vscode本身就支持，其他就需要下载插件了
  • request : 配置文件的请求类型，有launch和attach两种，launch是需要服务器的需要配置url，这里我就用的它，attach就比较麻烦了，因为配置launch也能用，所以我就没有配置attach了
  • url:这个是chrome插件带的，指定访问的链接，到这里我觉得就个缺点了，url只能配置死链接，就算用预定义变量也不能做到多项目自动识别要打开的HTML，可能是我没有发现其他的预定义变量，如果有大神知道，欢迎在评论里留言
  • webRoot：也是chrome插件带的，指定根目录或者执行文件
  • ${workspaceRoot}:就是你打开vscode读取的项目目录
  • sourceMaps:默认是启用的，对于打包的调试，大神们就必须开启了
  • userDataDir：临时目录,专门保存调试过程产生的东西，这个字段是为了重新打开一个浏览器窗口，不会强制关闭已经打开的浏览器

launch.json中有很多属性可以设置, 通过智能提示查看有那些属性可以设置, 如果要查看属性的具体含义, 可以把鼠标悬停在属性上面, 会属性的使用说明.

在launch.json中会使用到一些预定变量, 这些变量的具体含义如下：

  • ${workspaceRoot}：VSCode中打开文件夹的路径
  • ${workspaceRootFolderName}：VSCode中打开文件夹的路径, 但不包含"/"
  • ${file} ：当前打开的文件
  • ${relativeFile}：当前打开的文件,相对于workspaceRoot
  • ${fileBasename} ：当前打开文件的文件名, 不含扩展名
  • ${fileDirname} ：当前打开文件的目录名
  • ${fileExtname}：当前打开文件的扩展名
  • ${cwd} ：当前启动时的工作目录

当你配置完成后直接打开你要调试的js，进入调试界面选好调试的工具（就是刚才配置的名字）就是如图步骤2，


图中已有详细的描述，到这就结束，如果有不成功的或者不懂的，请留言，谢谢。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

VSCode

debugger

for

Chrome

VSCode配置 Debugger for Chrome插件 的相关文章

  • react脚手架配置别名并自动提示[VSCode]

    1 安装三方库 craco craco yarn add craco dev npm install craco craco save dev 2 配置craco config js const path require path modu

  • vscode远程ssh隧道连接linux服务器并配置conda环境调试python过程【保姆级教程】

    引言 为了彻底摆脱无界面不支持调试的xshell vscode是一款强大的神器 通过与远程服务器建立连接 可以做到远程debug和开发环境的搭建 非常好用 前期准备 vscode一枚 远程服务器用户名 IP 密码 1 本地vscode下载拓

  • 浏览器主页被篡改360篡改浏览器主页，官方四步最完美解决办法

    以前写过一篇浏览器主页被360篡改成他们的主页的文章 那时真的就是气的直接卸载了360 之后通过修改注册表的方式 将主页修改回来 方法很暴力 由于重做了系统 360又被重新安装了回来 结果和以往一样 我的主页还是被强制修改了 但是这次我冷静

  • vscode实现文件单步调试保姆级教程

    第一步 第二步 第三步 第四步 第五步 第六步 第七步 第八步 第九步 第十步 点击终端 gt 配置任务 第十一步 第十二步 第十三步 第十四步 设置完毕 可以在源程序打断点按F5执行了

  • selenium的使用

    selenium的使用 0 使用selenium import time from selenium webdriver import Chrome from selenium webdriver common by import By 1

  • 在命令行运行 VSCode（macOS）

    在命令行运行 VSCode macOS系统 Windows 版 VSCode 的安装脚本带着一个是否把 Code 加入 PATH 的选项 而 macOS版却没有 有的人想到给 VSCode 做一个符号链接加入 PATH 中 但实际上这样做会

  • [VScode]终端回应“pnpm : 无法将“pnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。“解决思路

    问题概述 遇到问题 在VScode终端输入pnpm install有错误提示 pnpm 无法将 pnpm 项识别为 cmdlet 函数 脚本文件或可运行程序的名称 请检查名称的拼写 如 果包括路径 请确保路径正确 然后再试一次 所在位置 行

  • vscode使用手册

    VS Code Visual Studio Code 是一款轻量级 跨平台的源代码编辑器 支持语法高亮 自动补全 调试 Git 版本控制等功能 下面是一些使用 VS Code 的基本操作 安装和启动 在官网上下载并安装 VS Code 打开

  • JAVA 【爬虫】 Selenium 无头浏览，禁止加载图片，启动参数，失效，无效

    JAVA Selenium 无头浏览 禁止加载图片 启动参数 失效 无效 可能有如下几个原因 代码问题 命令参数写错 无头浏览 headless 禁止加载图片 blink settings imagesEnabled false Chrom

  • Verilog中if- else if语句和case语句用法：

    一 if语句 1 两种情况 if 条件语句 begin end else begin end 2 多种情况 if 条件语句 begin end else if 条件语句 begin end else if 条件语句 begin end el

  • VScode配置文档

    vscode配置 常用插件 View In Browser 预览页面 ctrl F1 vscode icons 侧栏的图标 对于一个有视觉强迫症的人是必须要的 HTML Snippets 支持HTML5的标签提示 JS CSS HTML F

  • 办公小技巧：VSCode无法安装插件怎么办？

    Visual Studio Code是Microsoft开发的一款开源免费的现代化轻量级代码编辑器 它体积小 启动快 系统内存占用率低非常适合搭建IDE VSCode不仅支持几乎所有主流的开发语言的语法高亮 智能代码补全 自定义热键 括号匹

  • Axure谷歌Chrome浏览器插件安装教程

    1 引言 经常看到这样的问题 1 我用Axure做的原型怎么不能用谷歌浏览器查看 2 到哪里下载Axure谷歌浏览器插件 3 Axure谷歌浏览器插件下载下来怎么安装 其实这些问题百度一下都能找到答案 不过有些答案对于新手来说比较麻烦 就拿

  • VSCode中配置命令行参数

    VSCode中配置命令行参数 在跑程序调试的时候 可以直接使用脚本运行程序 这个时候调试代码只能用pdb 我觉得不太习惯 而且感觉不是很好 所以想这能不能将运行程序的脚本中的命令直接配置到vscode上 就有了这篇记录 正常vscode D

  • VSCode搭建ARM(STM32开发环境)

    目录 需要用到的工具 软件安装 下载安装 Visual Studio Code 下载安装 STM32Cubemx 下载安装 ARM GCC交叉编译工具链 下载安装 Msys2 下载安装 OpenOCD 下载安装 Make 开发环境配置 ms

  • vscode网页版code-server搭建和使用

    主力编辑器是vscode 手上正好也有台闲置的服务器 如果把vscode搞到浏览器中 那么在一些没有vscode的设备上也可以愉快的敲代码了 code server它可以让有浏览器的设备访问服务器上运行的vscode 这篇文章记录下code

  • VSCode『SSH』连接服务器『GUI界面』传输

    前言 最近需要使用实验室的服务器训练带有 GUI 画面的 AI 算法模型 pygame 但是我是使用 SSH 连接的 不能很好的显示模型训练的效果画面 所以下面将会讲解如何实现 SSH 连接传输 Linux GUI 画面的 注 我们没有采用

  • 钱越来越难挣？这期程序员兼职干货没有水分！

    钱越来越难挣 程序员找兼职越来越难 结局只能指路美团 文末福利 还没看透职场 高薪 骗局 别人早就把精力放在了做副业上 兼职找不到 多半是经验不够 思路没打开 本篇文章 应该能让你茅塞顿开 收获颇丰 先喝点水 干货满满 下面容我娓娓道来 一

  • 人工智能计算机视觉：解析现状与未来趋势

    导言 随着人工智能的迅速发展 计算机视觉技术逐渐成为引领创新的关键领域 本文将深入探讨人工智能在计算机视觉方面的最新进展 关键挑战以及未来可能的趋势 1 简介 计算机视觉是人工智能的一个重要分支 其目标是使机器具备类似于人类视觉的能力 这一

  • 雪球股票数据接口

    目录儿 雪球 K线接口 K线对象属性 雪球 K线接口 https stock xueqiu com v5 stock chart kline json symbol SZ300396 begin 1664553600000 period d

随机推荐

  • 【gym】env.render三种mode

    最近使用gym提供的小游戏做强化学习DQN算法的研究 xff0c 首先就是要获取游戏截图 xff0c 并且对截图做一些预处理 screen 61 env render mode 61 39 rgb array 39 上述代码是将游戏截图转换

  • python slice()函数

    slice函数会返回一个切片对象 xff0c 让数组按照该切片对象获取数据 参考自网站 xff1a Python slice 函数 菜鸟教程 slice的语法 xff1a class slice stop class slice start

  • 软件工程概论，课后作业1

    1 网站系统开发需要掌握的技术 在看了网上一些前辈的文章后 xff0c 我认为大体上有以下几点 至少熟悉一种建站程序 对空间和域名的知识有一定的了解 有一些美工基础 对编程有一些了解 代码知识基本的要懂 css 43 div会一点 简单的网

  • Debian11设置屏幕分辨率

    问题现象 xff1a 新的华硕计算机安装debian11后屏幕分辨率是1920 748并且无法修改 xff0c 换了显示屏和HDMI接口一样无法修改 使用 xrandr命令查询反馈 xrandr failed to get size of

  • matplotlib.pyplot.imshow()

    用matplotlib pyplot imshow x 函数将一个x矩阵转化为可显示的图像 这里需要注意的是x的数据类型 xff1a x为float xff0c 那么x的值要在0 1之间 xff1b x为int xff0c 那么x的值要在0

  • 使用telnet通过SMTP协议发送邮件

    1 确认本地电脑的telnet服务是否打开 2 查看邮箱授权码是否设置 在图片中有提示 xff0c 授权码是用于登录第三方邮件客户端的专用密码 xff0c 这样可以保护自己的密码不被泄露 xff0c 还能委托其他客户端进行邮件的操作 如果没

  • 在Linux环境下使用命令行编译运行C源文件

    1 安装gcc 首先如何确定是否已经安装gcc了呢 xff1f 如果有一个hello c的源文件 xff0c 那么使用命令gcc hello c 如果报出提示 xff0c command gcc not found就是代表没有安装这个程序

  • C语言的指针传递和C++的引用传递

    首先 xff0c C语言没有引用传递 C 43 43 中使用引用传递的方式是在函数的参数前加 amp 号 xff0c 如 xff1a void Delete X LinkList amp L ElemType x 声明 Delete X L

  • python 安装pandas失败的解决办法

    python 安装pandas失败的解决办法 1 首先用CMD进行安装 xff0c 安装失败 2 然后用pycharm进行安装 xff0c 同样也失败 图片省略 3 最后在pycharm中添加清华源网址 https pypi tuna ts

  • docker 容器的启动、停止和删除

    1 查看所有docker容器 查看所有在运行的容器 xff1a docker ps 查看所有容器 包括停止的 docker ps a 来看看他们的区别 xff1a 2 启动容器 这里我来启动第二个Redis容器 xff08 因为我已经有一个

  • 用real vnc连接服务器

    用real vnc连接服务器 xff08 一 xff09 在无法访问服务器内部网络 首先 xff0c 本地电脑需要可以ping通服务器的IP xff0c 像学校的服务器 xff0c 一般只能用学校的网络才能访问 xff0c 若在校外 xff

  • nginx配置ssl证书实现https访问

    配置ssl证书之前 xff0c 先准备SSL证书 xff0c 至于获取的途径很多 xff08 阿里云的服务 xff0c 第三方服务购买 xff09 这里不详细解释 以下是我的SSL证书 准备好证书后 xff0c 找到nginx的安装目录 x

  • 棋牌游戏算法——麻将系列总结

    麻将介绍 麻将的基本规则都是一样的 xff0c 我就不累赘了 我从事棋牌工作五年了 xff0c 开发过无数的麻将玩法 xff0c 如柳州麻将 xff0c 转转麻将 xff0c 红中麻将 xff0c 来宾麻将 xff0c 广东麻将 xff0c

  • Docker run 命令详解

    命令格式 xff1a docker run OPTIONS IMAGE COMMAND ARG Usage Run a command in a new container 中文意思为 xff1a 通过run命令创建一个新的容器 xff08

  • ROS笔记——创建简单的主题发布节点和主题订阅节点

    在安装好ROS后 xff0c 接着学习如何创建节点和节点之间的通信方式 xff0c 以一个简单的主题发布节点和主题订阅节点说明 节点是连接ROS网络等可执行文件 xff0c 是实现某些功能的软件包 xff0c 也是一个主要计算执行的进程 一

  • SVN常用命令总结

    svn使用总结 SVN检出操作 svn checkout path svn checkout svn 192 168 0 1 project 简写 xff1a svn co SVN查看状态 span class token string 3

  • vue-cli3搭建的vue改造成SSR项目

    vue cli3搭建的vue改造成SSR项目 一 文章简介二 搭建vue项目三 改造成SSR首先安装ssr的所需相关依赖改造router ts改造store ts改造main ts创建entry client ts创建entry serve

  • VSCode配置Git随记

    vscode中对git进行了集成 很多操作只需点击就能操作 无需写一些git指令 不过这就需要你对vscode进行配置 下面我会讲到git的配置与免密码上传github 一 安装Git管理工具 可上官网安装 安装路径Git 安装路径默认C

  • VSCode插件推荐（2018.5.31）

    前言 vscode我觉得是用过最好用的编辑器 xff0c 相对而言没有webStorm myeclipse那么卡 xff0c 而且最主要是免费的 xff0c 不用烦每次更新软件的时候破解码无法使用 xff0c 这篇博客主要是记录我自己发现的

  • VSCode配置 Debugger for Chrome插件

    Debugger for Chrome这个插件是直接在vscode里面进行调试js文件 xff0c 跟谷歌的控制台是一样的功能 xff0c 下载了它就不用打开浏览器的控制台就能进行打断点 首先在左侧扩展栏找到这个插件下载好了后重启编辑器之后

热门标签