使用 WebStorm 调试现代前端应用程序
- [时间]: 2019/10/30
- [keyword]: 前端, webstrom
尽管现在 Chrome DevTools 调试已经足够好用了, 但是还是有几点让笔者感觉不爽:
- 需要手动写
debugger
不能直接打断点 (如果你开了 eslint, 那就是车祸现场, 很难受)- 调试时看其他文件的源码不方便
- 最重要的当然是统一快捷键(误)
本文适用与 jetbrains 家的其他 IDE, 大部分内容来源均为 webstrom 的 这一篇博文
准备工作
- 安装 JavaScript Debugger 插件, 找到 plugins 然后搜索 JavaScript 即可搜索到.
- 为 Chrome 安装 JetBrains IDE Support 扩展.
- 点击右上角的
Add Configuration
, 然后会弹出Run/Debug Configurations
对话框, 这时候点击+
号, 在列表中选择JavaScript Debug
.
上面的步骤在文章结尾处都有图片示例, 文字没看懂的可以跳到结尾看图片哦.
例: React
创建一个 app, 并且启动
npx create-react-app my-app
cd my-app
npm start
注: 默认情况下该 app 会运行在 3000 端口, 如果手动设置了运行端口那么下面的网址也需要改变.
重新打开 准备工作
的第三步, 在 URL
一栏中输入 http://localhost:3000 并且保存该配置, 最后点击像小虫子一样的图标就可以开始调试了.
在进入调试模式后在 ide 中的打断点下次程序执行到断点处 app 就会自动进入调试模式.
除了 React, Vue, Angular, Electron 都是可以调试的, 步骤也都相同.
可能出现的问题以及解决方法
-
点击调试后没反应.
- 请确定填写的调试 URL 是正确的.
-
调试时打开的 chrome 不是正常使用的 chrome, 没有数据.(下面两个路径, 都已通过用 chrome 打开
chrome://version/
找到, 参考附录设置 chrome path 和 user_data
部分)- 原因1: 未设置 chrome 的正确执行路径.
- 解决方法: 打开 IDE 的设置页面, 找到
Tools\Web Browsers
, 找到 chrome, 编辑 path 部分, 设置为正确的路径. - 这个问题的第一个可能原因是未设置 user_data, chrome 有一个 user_data 数据, IDE 启动 chrome 的默认情况下会使用 IDE 内部的 user_data, 这就会运行一个什么数据都没有的 chrome.
- 解决方法: 打开 IDE 的设置页面, 找到
Tools\Web Browsers
, 找到 chrome, 点击右边的编辑图片, 勾选Use custom user data directory
, 然后填入正确的路径即可.
-
调试时每次都打开一个新的窗口.
-
这个问题的原因是因为 IDE 启动 chrome 的时候会为 chrome 添加
--remote-debugging-port
启动参数, 如果此时具有相同 user_data 的 chrome 启动则会新启动一个 chrome 窗口. -
解决方法: 先关闭 chrome, 然后通过 IDE 启动后, 使用被 IDE 启动的 chrome 即可.
-
在 vue-cli3+ 创建的项目中使用
在 vue-cli3+
下创建的项目开发环境下 webpack devtool 是 cheap-module-eval-source-map
,会导致 IDE 无法定位到文件位置,从而导致调试失效,在vue.config.js
中修改为 source-map
即可.
-
在项目根目录创建
vue.config.js
文件,如果已有则无需创建 -
修改
webpack devtool
为如下代码 (如果读者使用的是chainWebpack
来配置webpack
, 请自行搜索如果修改webpack 配置
。)module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'development') { config.devtool = 'source-map'; } } };
附录
安装插件
新增调试配置
设置 chrome path 和 user_data
没有感情结束语: 本文同样发于个人博客
推荐阅读
-
使用前端技术创建二维码生成器应用程序接口
-
使用 WebStorm 调试现代前端应用程序
-
.NET高级面试指南 Topic XVIII [ 介绍外观模式(Appearance Pattern),该模式提供了一个隐藏系统复杂性的简化界面 ]。- 简化复杂系统:当系统具有复杂的子系统结构时,可以使用外观模式来简化界面。提供统一界面:当客户端需要访问多个子系统时,可以使用外观模式提供统一界面。 外观模式在现代软件开发中得到广泛应用,尤其是在复杂系统中。例如 图形用户界面库:许多图形用户界面库(如 Qt、GTK+ 等)都使用外观模式来隐藏底层的复杂性,并为开发人员提供简单的界面来创建用户界面。 操作系统接口:操作系统中的系统调用和应用程序接口通常也使用外观模式来隐藏底层硬件和系统的复杂性,为应用程序提供访问系统资源的简单接口。企业应用程序:在可能涉及多个子系统的大型企业应用程序中,外观模式可用于封装这些子系统,并为客户端提供统一的使用界面。 网络框架:许多网络框架(如 ASP.NET MVC、Spring MVC 等)也使用外观模式来隐藏底层的复杂性,并为开发人员提供简单的接口来处理 HTTP 请求和响应。 集成开发环境(IDE):集成开发环境通常包含代码编辑器、编译器、调试器等多种功能。外观模式可用于封装这些功能,并为开发人员提供开发软件的简单界面。 代码示例:
-
使用 kubectl port-forward 端口转发功能快速调试应用程序
-
Java 类加载器的作用 - 简介:类加载器是 Java™ 中一个非常重要的概念。类加载器负责将 Java 类的字节码加载到 Java 虚拟机中。本文首先详细介绍了 Java 类加载器的基本概念,包括代理模型、加载类的具体过程和线程上下文类加载器等。然后介绍了如何开发自己的类加载器,最后介绍了类加载器在 Web 容器和 OSGi™ 中的应用。 类加载器是 Java 语言的一项创新,也是 Java 语言广受欢迎的重要原因之一。它允许将 Java 类动态加载到 Java 虚拟机中并执行。类加载器从 JDK 1.0 开始出现,最初是为了满足 Java Applets 的需求而开发的,Java Applets 需要从远程位置下载 Java 类文件并在浏览器中执行。现在,类加载器已广泛应用于网络容器和 OSGi。一般来说,Java 应用程序的开发人员不需要直接与类加载器交互;Java 虚拟机的默认行为足以应对大多数情况。但是,如果遇到需要与类加载器交互的情况,而您又不太了解类加载器的机制,就很容易花费大量时间调试异常,如 ClassNotFoundException 和 NoClassDefFoundError。本文将详细介绍 Java 的类加载器,帮助读者深入理解 Java 语言中的这一重要概念。下面先介绍一些基本概念。 类加载器的基本概念 顾名思义,类加载器用于将 Java 类加载到 Java 虚拟机中。一般来说,Java 虚拟机以如下方式使用 Java 类:Java 源程序(.java 文件)经 Java 编译器编译后转换为 Java 字节代码(.class 文件)。类加载器负责读取 Java 字节代码并将其转换为 java.lang 实例。每个实例都用来表示一个 Java 类。通过该实例的 newInstance 方法创建该类的对象。实际情况可能更加复杂,例如,Java 字节代码可能是由工具动态生成或通过网络下载的。 基本上,所有类加载器都是 java.lang.ClassLoader 类的实例。下面将详细介绍这个 Java 类。 java.lang.ClassLoader 类简介 java.lang.ClassLoader 类的基本职责是根据给定类的名称为其查找或生成相应的字节码,然后根据这些字节码定义一个 Java 类,即 java.lang.Class 类的实例。除此之外,ClassLoader 还负责加载 Java 应用程序所需的资源,如图像文件和配置文件。不过,本文只讨论它加载类的功能。为了履行加载类的职责,ClassLoader 提供了许多方法,其中比较重要的方法如表 1 所示。下文将详细介绍这些方法。 表 1.与加载类相关的 ClassLoader 方法
-
ActiViz(VTK C#库)学习使用心得体会三:C# 形式下的应用程序 VTK 调试与开发环境构建 - 一、实现可视化控件 RenderWindowControl
-
centos7 使用 lldb 调试 netcore 应用程序转储转储文件
-
全面指南:使用Postman进行前端接口调试