首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

VSCode 调试网页的 JS 代码有多香

一般来说,调试 Node.js 上跑的 JS 代码我会用 VSCode 的 debugger,调试浏览器上的 JS 代码我会用 chrome devtools。...直到有一天我发现 VSCode 也能调试浏览器上的的 JS 代码,试了一下,是真的香。 具体有多香呢?我们一起来看一下。...在项目的根目录下有个 .vscode/launch.json 的文件,保存了 VSCode调试配置。 我们点击 Add Configuration 按钮添加一个调试 chrome 的配置。...调试 Node.js 我们一般用 VSCode,而调试网页也可以用 VSCode,那么只要用熟了一个工具就行了,不用再去学 chrome devtools 怎么用,而且用 VSCode 调试体验也更好,...反正我觉得 VSCode 调试网页的 JS 代码挺香的,你觉得呢?

4.8K10

关于vscode断点调试

按钮, 在弹出的调试配置窗口中点击 设置 小齿轮, 然后选择 chrome, VS Code 将会在工作区根目录生成.vscode 目录,里面会有一个 lanch.json 文件并会自动打开 用下面的配置文件覆盖自动生成的...lanch.json 文件内容。...修改 webpack 的 sourcemap 如果你是基于 webpack 打包的 vue 项目, 可能会存在断点不匹配的问题, 还需要做些修改: 打开根目录下的 config 目录下的 index.js...文件 将dev 节点下的 devtool 值改为 ‘eval-source-map’ 将dev节点下的 cacheBusting 值改为 false 开始调试吧 一切具备了, 现在验收成果了 通过第一步的方式以远程调试打开的方式打开...现在就可以在.vue文件js代码中打断点进行调试了。

1.7K20

vscode运行python_vscode python 调试

Vscode+python+flake8 安装 配置 使用 总述 Vscode+python环境下,配置flake8与yapf,以及使用方法 1.1....配置vscode 1、打开settings.json文件 打开settings.json,加入如下配置: "python.linting.flake8Enabled": true,...,如下: 按下快捷键 Alt+Shift+F ,即可自动格式化代码,效果如下: 3.2. flake8使用 1、保存/打开py文件时,自动检测,并显示结果 注:如果同时打开多个py文件...,那么此处显示所有打开的PY文件的检测结果,如下所示 2、cmd命令: flake8 文件名 注:命令行启动检测结果与自动结果一致,格式不同而已 3.3. flake8命令行详解 1...忽略指定输出 flake8 a.py –ignore E501,E231,E203 3、通过 –select 参数设置只展示指定输出 flake8 a.py –select F401 3.4. vscode

2.2K40

VScode调试Linux详解

方式,远程有一个gdbserver,本地机器通过网络发指令给gdbserver完成调试 6)    基于vscode远程调试Linux       该方法支持调试Linux程序,不要编译器参与,可以完美的将...Makefile工程简单的接管起来调试,可以是基于ssh+vscode方式或者gdb+vscode+gdbserver方式。...二.基于vscode ssh远程调试Linux实战 1   软件安装 1)服务器安装gdb 注意我们是ssh+vscode方式,没有用到gdbserver,故不需要安装gdbserver。...如C/C++文件        2)选择远程配置文件目录,并创建默认的launch.json文件        3) 修改配置文件              1.可执行文件路径            ...,就可以启动远程的hello可执行文件,并进行单步,断点等各种调试 5) vscode同样支持attach到某个进程进行在线调试,对线上正在运行的进程进行各种调试和状态查看等

3.6K30

envoy vscode调试环境搭建

尝试了以下各种手段,包括 Jetbrains clion 调试 vscode Mac 本机 gdb(lldb) 调试 vscode docker container 容器调试 最终,只有最后一个方法成功...网上有网友生成的 cmake 工程文件 CMakeLists.txt,参考, 效果也不如意 vscode Mac 本机调试 编译没问题,但是 **打的断点无效,无法进入断点** # 安装依赖的工具 brew...# INFO: Build completed successfully, 5724 total actions # 生成 vscode 环境下的调试文件 tools/vscode/generate...tools/vscode/refresh\_compdb.sh remote-container 远程调试 原理 将本地代码挂载到一个安装了调试envoy必备工具的容器中,启动容器,并通过vscode.../vscode/refresh_compdb.sh,这一步会生成各种 complie_commands.json文件 生成 vscode 调试文件:tools/vscode/generate_debug_config.py

2.5K20

vscode调试vue工程

在 debug 时,通常的方式如下几种: 源代码中增加 debugger 或者 console.log 在 Chrome 浏览器 Sources 中加断点 vscode 中直接调试,对源码定位准确直观(...第一步: 首先确保 Chrome浏览器已正确安装,并在 vscode 中添加 vscode-chrome-debug 插件; 第二步: 修改 webpack 相关配置,输出 source-map...以 Vue CLI 3.X 为例,vue.config.js 中增加如下配置: module.exports = { chainWebpack: (config) => { if (isDev...第三步: 配置 launch.json 文件,具体配置 vscode-chrome-debug 插件有详细描述。 第四步: 增加断点,启动即可,会开启一个新的浏览器窗口。...其他: 如果 vue 文件中不能加断点,是由于 vscode 配置问题导致,如下修改:首选项 => 设置 => 搜索”debug“ => 功能/调试 => 勾选 Debug:Allow Breakpoints

62330

vscode调试vue工程

在 debug 时,通常的方式如下几种: 源代码中增加 debugger 或者 console.log 在 Chrome 浏览器 Sources 中加断点 vscode 中直接调试,对源码定位准确直观...第一步: 首先确保 Chrome浏览器已正确安装,并在 vscode 中添加 vscode-chrome-debug 插件; ?...以 Vue CLI 3.X 为例,vue.config.js 中增加如下配置: module.exports = { chainWebpack: (config) => { if (isDev...第三步: 配置 launch.json 文件,具体配置 vscode-chrome-debug 插件有详细描述。 ? 第四步: 增加断点,启动即可,会开启一个新的浏览器窗口。...其他: 如果 vue 文件中不能加断点,是由于 vscode 配置问题导致,如下修改:首选项 => 设置 => 搜索”debug“ => 功能/调试 => 勾选 Debug:Allow Breakpoints

1K21
领券