vscode断点调试本地客户端文件
一、安装chrome,安装vscode,打开vscode编辑器,安装插件Debugger for Chrome
二、新建文件
1、目录结构
. ├── index.html ├── index.js
2、在vscodeDebug工程中,新建index.html
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>vscode调试本地文件</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="index.js"></script> </head> <body> <div>vscode调试本地js文件</div> </body> </html>
3、在vscodeDebug工程中,新建index.js
var data = []; setTimeout(function (){ data.push(1); },2000); console.log(data[0]); // 结果 // undefined /* var data = []; var cb = function(){ console.log(data[0]); }; var pushData = function(callback){ data.push(1); callback(); }; setTimeout(function () { pushData(cb); },2000); */
三、点击左侧栏调试按钮,切换到debug模式
1、生成并配置launch.json文件
点击添加配置按钮,此时vscode会自动在.vscode文件夹下新建launch.json文件,根据调试需要自己修改launch.json文件,然后选择需要调试的项目,并选择chrome环境。
{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "name": "启动 Chrome 并打开 localhost", "type": "chrome", "request": "launch", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}" }, { "name": "Attach to Chrome", "type": "chrome", "request": "attach", "port": 9222, "webRoot": "${workspaceFolder}" }, { "name": "使用本机 Chrome 调试", "type": "chrome", "request": "launch", "sourceMaps": false, "file": "${workspaceRoot}/index.html" } ] }
file值表示【需要调试的文件路径】,调试方式为【使用本机chrome调试】。
2、在index.js文件中打断点
3、开始调试
vscode断点调试本地客户端文件的更多相关文章
- vscode断点调试工程化客户端文件
一.调试webpack配置文件 launch.json的配置如下,在webpack.dev.config.js文件中设置断点,开始调试. { "version": "0. ...
- vscode断点调试工程化服务端文件
一.创建express应用我们使用express-generator创建一个新的express应用.1.全局安装express-generator // 安装 sudo npm install exp ...
- 使用VSCode 断点调试 js项目,html页面
一.效果目的 1.在VSCode里,直接F5打开html页面,并且可以在编辑器里,进行断点调试js代码: 二.工具准备 1.VSCode 软件 2.一个js项目 3.VSCode 上装一个插件:Deb ...
- .NET C#微信公众号开发远程断点调试(本地远程调试生产环境代码)
最近在做微信公众号开发,由于之前没有接触过,突然发现调试不方便,不方便进行断点跟踪调试.因为微信那边绑定的服务器地址必须是公网地址,但是还是想进行断点调试(毕竟这样太方便了,程序有Bug,一步步断点跟 ...
- vscode断点调试简单的服务端文件
一.无配置文件时,如何调试? 1.安装code命令打开vscode,快捷键command + shift + p,输入shell command,选择install 'code' command in ...
- 如何远程断点调试本地localhost项目
前言 对于一般开发网站的IDE自带的服务器是都跑在 localhost 地址上的.(如下图的asp.net) 而这种地址是只能在本机通过 localhost 或 127.0.0.1 地址访问到,而无法 ...
- phpstorm断点调试 php.ini 文件中 Xdebug 配置
[XDebug]xdebug.profiler_output_dir="D:\phpStudy\tmp\xdebug"xdebug.trace_output_dir="D ...
- 解读vscode断点调试配置文件【待续】
一.参考链接 https://code.visualstudio.com/Docs/editor/debugging https://code.visualstudio.com/docs/nodejs ...
- Ubuntu16.04 中 Vscode 如何断点调试C语言程序
个人博客链接:Ubuntu16.04 中 Vscode 如何断点调试C语言程序 问题:环境是 Ubuntu16.04,如何使用 Vscode 断点调试C语言程序. 写代码没有调试环境是不能忍受的,所以 ...
随机推荐
- CAN总线为什么要有两个120Ω的终端电阻?
1 CAN总线为什么要有两个120Ω的终端电阻? 2 终端电阻的作用是使阻抗连续,消除反射,那为什么只在物理上最远的两个节点加这个匹配电阻,而不是在所有的节点都加上匹配电阻? 高频信号传输时,信号波 ...
- mysql慢查询日志按天切割归纳
问题描述: mysql开启慢查询功能,再正常不过,那么存在这样一种情况:慢查询写入的文件位置和文件名是指定好的,如果慢查询时间设定严苛,不出意外,记录慢查询的单个文件大小会日益增大,几十兆或者上百兆, ...
- Spring MVC -- Spring框架入门(IoC和DI)
Spring MVC是Spring框架中用于Web应用开发的一个模块.Spring MVC的MVC是Model-View-Controller的缩写.它是一个广泛应用于图像化用户交互开发中的设计模式, ...
- 第十八节、基于传统图像处理的目标检测与识别(HOG+SVM附代码)
其实在深度学习中我们已经介绍了目标检测和目标识别的概念.为了照顾一些没有学过深度学习的童鞋,这里我重新说明一次:目标检测是用来确定图像上某个区域是否有我们要识别的对象,目标识别是用来判断图片上这个对象 ...
- Vue(小案例_vue+axios仿手机app)_图片列表操作
一.前言 1.让图片还没有被完全加载出来的时候给用户提示 2.图片查看器 二.主要内容 1.让图片还没有被完全加载出来的时候 ...
- python 爬虫之beautifulsoup(bs4)环境准备
环境准备: bs4安装方法:https://blog.csdn.net/Bibabu135766/article/details/81662981 requests安装方法:https://blog. ...
- Numpy 系列(九)- 结构化数组
简介 之前我们操作Numpy的数组时,都是通过索引来操作的.针对二维数组,使用索引可以完成对行.列的操作.但是这是非常不直观的.可以把二维数组想象成一个excel表格,如果表格没有列名,操作起来会 ...
- CMDB资产管理系统开发【day26】:linux客户端开发
客户端疑难点及获取流程 1.linux客户端支持2就可以,python3就是很麻烦 难道你要求所有的客户端都上pytho3吗? 现在从bin的入口进去 HouseStark.ArgvHandler(s ...
- Linux中执行C++程序
参考:https://blog.csdn.net/qq_31125955/article/details/79343498 https://blog.csdn.net/weixin_35477207/ ...
- a标签跳页传参,以及截取URL参数
<a href="dd.index?aa=1&&bb=2"></a> //截取URL参数 // console.log(window.loc ...