VSCode调试网页JavaScript代码

时间: 2018-10-24阅读: 2411标签: 调试

一、调试准备

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中打开调试按钮进行调试,即可进入调试模式。

来源:https://www.cnblogs.com/jswolf/archive/2018/10/23/9836464.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1177

js检测开发者工具是否打开,防止别人恶意调试我们的代码

网站如何检测到是否开启开发者工具?这里不是指监听键盘事件F12之类的方法,而是通过浏览器右侧点击打开开发者工具。现在介绍2个方法,非常管用,可以检测到你是否开启了控制台程序,可以算是JavaScript的一些奇淫巧技,将如下这段代码加入你的网站即可。

Flutter 应用调试

程序调试是程序投入运行之前,使用手工或编译程序等方法进行的测试,主要用以修正语法错误和逻辑错误。程序调试是保证计算机信息系统正确性的必不可少的步骤,在Flutter应用开发中,Android Studio和VSCode是两种比较常见的集成开发环境

移动端调试工具推荐

vConsole腾讯出品的 Web 调试面板,相信不少前端小伙伴都用过。Charles 是一款强大的抓包工具,可以截取包括 https 在内的各种网络请求并方便的查看具体信息。weinre是一款很不错的网页检查工具,可以通过在本地启动一个 weinre 服务

js 反调试_JavaScript 反调试技术技巧

对于JavaScript来说,你只需要花一点时间进行调试和分析,你就能够了解到JavaScript代码段的功能逻辑:1. 检测未知的执行环境(我们的代码只想在浏览器中被执行);2. 检测调试工具(例如DevTools);3. 代码完整性控制;4. 流完整性控制;5. 反模拟;

vConsole_vue移动端调试

当我们在浏览器开发vue页面时,由于浏览器对于调试有天然的支持,我们开发起来很方便。但是现在已经进入了移动端时代,移动端页面的需求越来越大。在开发移动端页面的时候我们通常是在浏览器完成开发完成

10个用Console来Debug的高级技巧

在过去的十年中,我最热衷的事情之一就是前端开发(特别是JavaScript)。作为一个匠人,我喜欢专研各种工具。在本文,我会为你介绍一些用老式console来debug的技巧。

使用vconsole进行移动端调试

可使用npm进行安装:在项目的根html文件的<head>标签中引入dist/vconsole.min.js,也可使用CDN免安装:同样需要放在项目根html文件的<head>标签中

无限debugger问题的实现_解决阻止页面不断debugger

一次扒某网站的前端代码,打开控制台要看Network,结果发现他们页面一打开控制台就不断的debugger,100ms一次,很影响看页面内容。每次在断点处停下来的时候页面都会跳到source这个tab页面,也能够看到他的debugger的代码,其实他的实现很简单

JS反调试技术

本文简单整理一下日常使用到的JS反调试技术,主要目的防止非法用户查看网页运行流程,分析代码。虽然不是绝对安全的,但也在一定程度上提高了调试破解的难度。在Chrome浏览器中,最常用到的就是DevTools工具进行调试JS

JS断点调试,必备的javaScript的debug调试技巧

断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了。本文主要介绍了“逐语句执行”按钮、“逐过程执行”按钮、console控制台这三个工具,以及调试bug时的一些思路。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!