Webstorm 调试 JavaScript 代码

通常前端项目的 JavaScript 代码调试是通过浏览器的开发者工具（右键菜单中点击 “检查”）来完成。这种调试的方式的舒适度很差，显示页面的区域占了很大一块空间，留给调试窗口的空间很小。另外，浏览器开发者工具也不具备 IDE 代码跳转功能等。在不跳出 IDE 的情况下直接调试 JavaScript 代码，可以最大限度增加调试窗口，并在不写 console.log 的情况下，通过直接在代码处显示各个变量的值，使用表达式计算值，函数调用堆栈等方式快速定位问题。

添加 JavaScript Debug 配置
a、通过 Run → Edit Configuration → JavaScript Debug，打开 Debug 配置面板

b、点击绿色十字图标，在下拉列表中选择添加 JavaScript Debug
c、URL 一栏中添加 http://localhost:8080
d、在 Remote URL 一栏中添加 webpack:///src
e、点击 OK 按钮保存
执行 npm run start，运行项目
在工具条中选择创建的 VueDebug 配置，
并点击右边小虫子图标启动调试，浏览器会自动打开 http://localhost:8080 页面并点击右边小虫子图标启动调试，浏览器会自动打开 http://localhost:8080 页面
4.在代码中打断点，当访问的页面执行到断点代码处，程序中断执行，并等待进一步调试

5.通过 Webstorm Debugger 工具查看局部变量，调用堆栈
- 将鼠标挪至代码变量上方，在提示框中点击十字图标查看变量
- 在 Debugger 面板的 Variables 区域查看当前变量
- 在Debugger 面板的 Frames 处查看函数调用堆栈关系
  
  6.通过 Webstorm Console，直接测试 JavaScript 代码片段执行结果或查看变量
- 输入变量并回车，将鼠标挪着输出的结果上方，点击十字图标可以查看详细的变量值
- 输入代码片段，可以直接查看执行结果

扩展阅读 - Webstorm 重启浏览器进程调试
在 WebStorm 中启动调试时，WebStorm 会根据你设置的url，自动打开新的 Chrome 浏览器进程访问这个设置的 url，而且这个浏览器页面和你平常看到的浏览器差异会比较大，看不到书签栏，也看不到你先前所装的所有插件。这是因为平常我们打开Chrome浏览器进程时，并不会添加–remote-debugging-port选项，而 WebStorm 无法让已经打开的Chrome实例支持调试，所以必须重新打开一个新的Chrome浏览器进程

扩展阅读 - WebStorm 需要两步启动调试
Web项目的调试和我们平常调试Java项目，安卓项目并不同，因为我们开发Vue项目时，使用webpack-dev-server，也就是说不是 WebStorm 自带的 Server，此时需要先启动 Server (可以使用命令行 npm run start ，也可以通过在 IDE 的 Npm Script 管理器中双击 start 或者 dev 启动 Server)，然后才能启动调试器。

Webstorm 调试 JavaScript 代码相关推荐

VS2010Web默认的浏览器设置和VS里调试JavaScript代码的设置
前言重装系统后,VS调用的Web浏览器不是IE了,VS调式不了JavaScript代码了.这两天一直在试终于搞定了.这里查找的问题当然主要是VS里面调式JavaScript代码了. 第一种方式设置V ...
vscode 调试参数_如何通过vscode运行调试javascript代码
初次正式要写 javascript 相关的代码,想要用 vscode 直接编译 js 代码,但是发现没有那么简单,需要配置好 launch.json 文件,现已经在vscode上编译过去并且可以调试 ...
VSCode配置调试JavaScript代码
VSCode配置调试JavaScript代码官网说明调试 1.创建配置 launch.json 文件按照图示点击创建 LeetCode 是文件夹的名字,以文件夹配置选择Node.js调试器 Le ...
asp js单步调试_如何使用Chrome的控制台高效的调试Javascript代码?
引言在我们的日常开发中我们常常会遇到JavaScript的调试问题,而我们解决问题的传统解决方案就是使用大量的console.log或者console对象的其他方法,这会给我们带来很多不便,特别是遇 ...
调试JavaScript代码
JavaScript调试代码 (JavaScript debugging the code) Debugging is the process of finding mistakes or bugs ...
WebStorm调试javaScript
目录 1. WebStorm调试官方视频: 2. Chrome安装插件JetBrains IDE Support 3. 设置ip地址和端口号 3.1 查看WebStorm的Debugger端口 3.2 ...
使用chrome开发者工具调试JavaScript代码的三种常用方法
对 JS 程序的调试,除了在 JS 程序中使用 alert().console.log() 方法跟踪和调试代码外,开发人员也会经常使用一些调试工具.最常用的 JS 调试工具就是一些主流的浏览器的调试工 ...
f12弹出debug_调试Javascript代码(浏览器F12及VS中debugger关键字)
目前,常用的浏览器IE.Chrome.Firefox都有相应的脚本调试功能.作为我们.NET 阵营,学会如何在IE中调试JS就足够了,在掌握了IE中的调试方法以后,Chrome和Firefox中的调试 ...
IDEA调试JavaScript代码
1.使用插件 JetBrains IDE Support 这里提供的是CSDN下载,离线安装版,也可以自己去翻墙去谷歌的插件市场下载安装. 其他浏览器只要是使用谷歌浏览器内核的都可以安装使用,你要是 ...

Webstorm 调试 JavaScript 代码

Webstorm 调试 JavaScript 代码相关推荐

最新文章

热门文章