基于VSCode调试网页JavaScript代码过程详解

一、调试准备

Windows10 64bits

IDE：Visual Studio Code1.28.2

安装插件：Chrome（安装方法：Debug -> Install Additional Debuggers... -> Debugger for Chrome，重新启动vscode即可。）

二、调试配置

首先该插件运行需要安装有本地服务器，其次有两种配置方式，分别为：

（1）launch：重新打开一个chrome来显示应用程序

（2）attach：在已经运行的chrome中显示应用程序

2.1、Launch配置

按F5并选择chrome进入配置文件launch.json，我的Launch配置如下所示：

"version": "0.2.0",
"configurations": [
  {
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost/文件路径",
    "webRoot": "${workspaceFolder}"
  }
]

2.2、Attach配置

attach的launch.json配置如下所示：

{
  "type": "chrome",
  "request": "attach",
  "name": "Attach to Chrome",
  "port": 9222,
  "sourceMaps": true,
  "webRoot": "${workspaceFolder}"
}

步骤一：让chrome进入调试模式：

方法一：在命令行中进行设置：

路径/chrome.exe --remote-debugging-port=9222

方法二：chrome桌面图标右键 -> 属性 -> 目标 -> 在路径后面添加 --remote-debugging-port=9222 即可。

其中 --remote-debugging-port 的值与lanuch.json中的 port 的值要匹配。然后在浏览器中打开本地服务器上的web页面

步骤二：在vscode中打开调试按钮进行调试，即可进入调试模式。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VsCode新建VueJs项目的详细步骤

    VsCode新建VueJs项目的详细步骤

    本文介绍了VsCode新建VueJs,分享给大家,具体如下: 使用vue-cli快速构建项目 ( vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 安装vue-cli之前,需要先安装了vue和webpack ) · node -v //(版本低引起:bash: npm: command not found) · npm -v //以上帮助检查是否安装 node npm · 输入vue,//测试vue是否安装成功 · 输入vue list //看vue中有哪些子类 np

  • 利用types增强vscode中js代码提示功能详解

    利用types增强vscode中js代码提示功能详解

    使用 types 增强vscode中javascript代码提示功能 微软的vscode编辑器是开发typescript项目的不二首选,其本身也是采用typescript开发的. 使用过ts的同学都知道 *.d.ts 类型声明文件,其管理工具,从最初的 tsd,到后来的 typings,一直到现在的@types,类型声明文件为ts的智能提示,类型检查提供了有力支持. 我们也可以使用类型声明文件,增强vscode编辑javascript时的智能提示. 关于vscode这方面更深的说明,请访问以下链

  • 自己的vscode-settings.json配置详解

    vscode从插件库里安装eslint和prettier 实现自动格式化 { // 是否允许自定义的snippet片段提示 "editor.snippetSuggestions": "top", // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #每次保存的时候

  • 详解如何在vscode里面调试js和node.js的方法步骤

    在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可以方便的进行源码断点调试.其步骤有四,详情不表,粗略概括如下: 1.打开Chrome开发者工具: 2.点击进入Sources标签页,在页面的左侧就能看到JS代码的目录: 3.找到需要设置断点的源文件,在需要中断的哪行代码左侧单击鼠标左键,就可以设置断点,如果你的代码是uglify过的,则需导入相应的

  • 解析VScode在Windows环境下c_cpp_properties.json文件配置问题(推荐)

    初次使用VScode,我们都会碰到一个问题,就是在编写C和C++源文件时,头文件提示未配置好等错误.关于这个问题,给出方案如下:我想大家碰到的最多的问题就是"includepath"的设置问题: 1. "C:/MinGW/include/**"为你们下载的MinGW的include文件夹路径 2."c:/mingw/bin/-/lib/gcc/mingw32/6.3.0/include/c++", "c:/mingw/bin/-/lib

  • VSCode中如何利用d.ts文件进行js智能提示

    VSCode中如何利用d.ts文件进行js智能提示

    自动补全(智能提示) 因为之前微软推出了typescript语言,结合tsd文件,用visual studio写typescript代码是相当爽的,智能提示的功能非常nb. 这个功能理所应当也被vsc继承了. vsc的自动补全用的是typings. 先上效果图: 安装 nodejs 因为需要使用到node里面的npm去安装别人写好的d.ts文件,所以要先安装nodejs.具体步骤不说了,去nodejs官网上下载相应的程序,点击下一步下一步安装就行了. 添加项目的配置文件 在项目的根目录,创建一个

  • 利用vscode调试编译后的js代码详解

    利用vscode调试编译后的js代码详解

    前言 在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. vscode 是一个非常棒的编辑器,内置功能强大的调试能力.经过简单的设定,就可以对 js 文件进行调试.但有时我们想要调试的内容是经过编译的,当然我们可以直接调试编译后的代码.但经过编译压缩以后的代码,可读性很差,且也可能无法分模块查看了,有什么方法进行编译前的代码调试么?答案当然是肯定的. 下面话不多说了,来一起看看详细的介绍吧. vscode 的常规调试 vscode 的调试界面在窗口最左边: 最

  • 基于VSCode调试网页JavaScript代码过程详解

    一.调试准备 Windows10 64bits IDE:Visual Studio Code1.28.2 安装插件:Chrome(安装方法:Debug -> Install Additional Debuggers... -> Debugger for Chrome,重新启动vscode即可.) 二.调试配置 首先该插件运行需要安装有本地服务器,其次有两种配置方式,分别为: (1)launch:重新打开一个chrome来显示应用程序 (2)attach:在已经运行的chrome中显示应用程序

  • Anaconda＋vscode＋pytorch环境搭建过程详解

    1.安装Anaconda Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项.在官网上下载https://www.anaconda.com/distribution/,因为服务器在国外会很慢,建议从清华镜像https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/下载. 2.安装VScode 需要在Anaconda再装VScode,因为Anaconda公司和微软公司的合作,不用在对进

  • 基于nginx设置浏览器协商缓存过程详解

    这篇文章主要介绍了基于nginx设置浏览器协商缓存过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 强缓存与协商缓存的区别 强缓存:浏览器不与服务端协商直接取浏览器缓存 协商缓存:浏览器会先向服务器确认资源的有效性后才决定是从缓存中取资源还是重新获取资源 协商缓存运作原理 现在有一个这样的业务情景:后端的静态资源会不定时地发生更新,而因为浏览器默认使用强缓存,会默认从浏览器缓存中取到过时的资源. 现在我们希望浏览器每次获取资源的时候都向后

  • 基于docker 搭建Prometheus+Grafana的过程详解

    基于docker 搭建Prometheus+Grafana的过程详解

    一.介绍Prometheus Prometheus(普罗米修斯)是一套开源的监控&报警&时间序列数据库的组合,起始是由SoundCloud公司开发的.随着发展,越来越多公司和组织接受采用Prometheus,社会也十分活跃,他们便将它独立成开源项目,并且有公司来运作.Google SRE的书内也曾提到跟他们BorgMon监控系统相似的实现是Prometheus.现在最常见的Kubernetes容器管理系统中,通常会搭配Prometheus进行监控. Prometheus基本原理是通过HTT

  • 使用GruntJS链接与压缩多个JavaScript文件过程详解

    自己写了个简单的HTML5 Canvas的图表库,可以支持饼图,折线图,散点图,盒子图 柱状图,同时支持鼠标提示,绘制过程动画效果等.最终我想把这些多个JS文件变成 一个JS文件发布出去,于是我的问题来啦,怎么把这些JS文件搞成一个啊,群里有个 朋友告诉我,GruntJS – JavaScript多文件编译,风格检查,链接与压缩神器.Google了一 把终于帮我完成这个任务,算是入门,分享一下过程. 一什么是GruntJS 不想翻译英文,自己看它的网站吧->http://gruntjs.com/

  • Java导出网页表格Excel过程详解

    将网页中的table数据,导出到excel表格,可以使用java POI实现. java poi是java中操作excel的工具,支持excel的导入与导出,一般有三种形式: 1.HSSFWorkbook:是操作Excel2003以前(包括2003)的版本,扩展名是.xls: 2.XSSFWorkbook:是操作Excel2007后的版本,扩展名是.xlsx: 3.SXSSFWorkbook:是操作Excel2007后的版本,扩展名是.xlsx: 首先对这三种方式进行一个对比: 1.HSSFWo

  • Python爬虫 12306抢票开源代码过程详解

    Python爬虫 12306抢票开源代码过程详解

    今天就和大家一起来讨论一下python实现12306余票查询(pycharm+python3.7),一起来感受一下python爬虫的简单实践 我们说先在浏览器中打开开发者工具(F12),尝试一次余票的查询,通过开发者工具查看发出请求的包 可以看到红框框中的URL就是我们向12306服务器发出的请求,那么具体是什么呢?我们来看看 https://kyfw.12306.cn/otn/leftTicket/queryZ?leftTicketDTO.train_date=2019-01-21&leftT

  • 基于 Django 的手机管理系统实现过程详解

    基于 Django 的手机管理系统实现过程详解

    一.概述 打算通过设计数据库,然后结合 Python 框架Django,实现在网页上对数据库的增删改查(本例以手机的管理为例,不考虑订购功能),有普通用户界面和管理员用户界面,普通用户只能做简单的查看需求,管理员用户可以实现对数据库内容的实时修改. 网站主体如下图: 二.设计数据库 根据业务需求,设计数据表,需要下列这些属性: 手机型号.品牌.手机描述.出厂年份.价格.照片.产地. 根据数据表设计原则,数据表设计需要满足基本的函数依赖和范式要求,因此我们将上述属性拆分为四张表格,并建立这些数据表

  • 使用vscode快速建立vue模板过程详解

    使用vscode快速建立vue模板过程详解

    当我们希望每次新建.vue文件后,vscode能够根据配置,自动生成我们想要的内容. 打开vscode编辑器,依次选择"文件 -> 首选项 -> 用户代码片段",此时,会弹出一个搜索框,我们输入vue,将代码ctrl+c 到vue-html.json { "Print to console": { "prefix": "vue", "body": [ "<!-- $0 -->

  • 基于Python制作一副扑克牌过程详解

    基于Python制作一副扑克牌过程详解

    整理一下通过本文分享给大家, 该案例是通过 Python 类属性创建一幅除去大王.小王之后的 52 张扑克牌,并实现随机抽牌.排序.洗牌等功能: 创建一个纸牌类 一副扑克除去大王小王之外,剩下的 52 张纸牌以花色为基准(梅花.方块.黑桃.红心)可分为 4 组,每组有 13 张牌组成:因此可创建两个列表一个来存储花色,一个存储 13 个字符:通过两个列表之间的随机组合来生成 52 张纸牌, 代码如下: ​ 代码中通过collections.namedtuple模块创建一个类来表示一幅纸牌,['r

随机推荐