使用 WebStorm 调试现代前端应用

• [时间]: 2019/10/30
• [keyword]: 前端, webstrom

尽管如今 Chrome DevTools 调试已经足够好用了, 可是仍是有几点让笔者感受不爽:

1. 须要手动写 debugger 不能直接打断点 (若是你开了 eslint, 那就是车祸现场, 很难受)
2. 调试时看其余文件的源码不方便
3. 最重要的固然是统一快捷键（误）

本文适用与 jetbrains 家的其余 IDE, 大部份内容来源均为 webstrom 的 这一篇博文

准备工做

1. 安装 JavaScript Debugger 插件, 找到 plugins 而后搜索 JavaScript 便可搜索到.
2. 为 Chrome 安装 JetBrains IDE Support 扩展.
3. 点击右上角的 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 都是能够调试的, 步骤也都相同.

可能出现的问题以及解决方法

1. 点击调试后没反应.

   • 请肯定填写的调试 URL 是正确的.

2. 调试时打开的 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, 而后填入正确的路径便可.

3. 调试时每次都打开一个新的窗口.

   • 这个问题的缘由是由于 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便可.

1. 在项目根目录建立 vue.config.js 文件，若是已有则无需建立

2. 修改 webpack devtool 为以下代码 (若是读者使用的是 chainWebpack 来配置 webpack, 请自行搜索若是修改 webpack 配置。)

   module.exports = {
       configureWebpack: config => {
           if (process.env.NODE_ENV === 'development') {
               config.devtool = 'source-map';
           }
       }
   };
   复制代码

附录

安装插件

新增调试配置

设置 chrome path 和 user_data

没有感情结束语: 本文一样发于我的博客