WebStorm 与 Chrome DevTools 的联动配置

webstorm 与 chrome devtools 联动配置方法如下：1. 启动 webstorm 内置 web 服务器并设置端口；2. 在 chrome 中安装 “jetbrains ide support” 扩展；3. 在 webstorm 中创建 javascript debug 配置，填写正确的 url、选择 chrome 浏览器；4. 点击调试按钮启动调试。若连接失败，可检查端口占用、扩展状态、url 配置、清理缓存或重启工具。调试 vue 或 react 项目时，需安装对应插件、设置 javascript 版本为 ecmascript 6，并确保 source map 已配置，最终通过 chrome debug 配置进行调试。正确配置后能显著提升前端开发效率。

WebStorm 和 Chrome DevTools 的联动配置，简单来说，就是让 WebStorm 能够直接调用 Chrome DevTools，方便调试前端代码。这省去了手动切换窗口、刷新页面的麻烦，效率提升显著。

配置 WebStorm 与 Chrome DevTools 联动，其实没那么复杂。

启动 WebStorm 的内置 Web 服务器

WebStorm 自带了一个内置的 Web 服务器，我们需要先启动它。打开 WebStorm 的 "Settings/Preferences"，找到 "Build, Execution, Deployment" -> "Debugger"，确认 "Built-in server port" 设置为你想要的端口（比如 63342）。记下这个端口，后面会用到。

配置 Chrome 调试

接下来，需要在 Chrome 中安装 "JetBrains IDE Support" 扩展。在 Chrome 网上应用店搜索并安装即可。安装完成后，Chrome 工具栏会出现一个 JetBrains 的图标。

创建 Chrome 调试配置

回到 WebStorm，点击 "Run" -> "Edit Configurations..."，点击 "+" 号，选择 "JavaScript Debug"。

• Name: 给配置起个名字，比如 "Chrome Debug"。
• URL: 这里填写你要调试的页面的 URL。注意，要使用 WebStorm 内置服务器的地址，格式是

  http://localhost:<端口>/<项目路径>/<你的HTML文件>

  。 例如：

  http://localhost:63342/my-project/index.html

  。

  <项目路径>

  指的是你的项目在 WebStorm 中的根目录。
• Browser: 选择 "Chrome"。

保存配置。

开始调试

现在，点击 WebStorm 工具栏上的 "Debug" 按钮（绿色虫子图标），选择你刚刚创建的 "Chrome Debug" 配置。WebStorm 会自动启动 Chrome，并打开你指定的 URL。

在 Chrome DevTools 中，你可以看到 WebStorm 已经连接上。你可以在 WebStorm 中设置断点，然后在 Chrome DevTools 中进行调试。

就这样，WebStorm 和 Chrome DevTools 就联动起来了。

天工大模型

中国首个对标ChatGPT的双千亿级大语言模型

下载

如何解决 WebStorm 连接 Chrome DevTools 失败的问题？

有时候，配置完成后可能会遇到 WebStorm 无法连接 Chrome DevTools 的问题。这通常是由于端口冲突、Chrome 扩展问题或者 WebStorm 配置错误导致的。

• 检查端口占用: 确认 WebStorm 内置服务器的端口没有被其他程序占用。你可以尝试修改端口号，然后重启 WebStorm。
• 检查 Chrome 扩展: 确保 "JetBrains IDE Support" 扩展已经启用，并且是最新版本。尝试禁用并重新启用该扩展。
• 检查 URL 配置: 仔细检查 "JavaScript Debug" 配置中的 URL 是否正确。确保端口号、项目路径和 HTML 文件名都正确无误。
• 清理 Chrome 缓存: 有时候 Chrome 的缓存可能会导致连接问题。尝试清理 Chrome 的缓存和 Cookie。
• 重启 WebStorm 和 Chrome: 这是一个万能的解决方案，有时候重启一下就可以解决问题。

如果以上方法都无法解决问题，可以尝试在 WebStorm 的 "Help" 菜单中选择 "Find Action..."，然后搜索 "Invalidate Caches / Restart..."。这将清理 WebStorm 的缓存并重启，有时候可以解决一些奇怪的问题。

WebStorm 调试 Vue 项目时如何配置？

调试 Vue 项目和调试普通的 HTML 项目略有不同。你需要确保 WebStorm 能够正确识别 Vue 组件和 Source Map。

• 安装 Vue.js 插件: 在 WebStorm 的 "Settings/Preferences" 中，找到 "Plugins"，搜索并安装 "Vue.js" 插件。
• 配置 JavaScript 版本: 在 "Settings/Preferences" 中，找到 "Languages & Frameworks" -> "JavaScript"，将 "JavaScript language version" 设置为 "ECMAScript 6"。
• 配置 Source Map: 确保你的 Vue 项目已经配置了 Source Map。Source Map 可以将编译后的 JavaScript 代码映射回原始的 Vue 组件，方便调试。通常情况下，Vue CLI 创建的项目已经默认配置了 Source Map。
• 使用 Chrome Debug 配置: 像调试普通 HTML 项目一样，创建一个 "JavaScript Debug" 配置，URL 指向你的 Vue 项目的入口 HTML 文件。

另外，你可能需要在

vue.config.js

devtool

module.exports = {
  devtool: 'source-map' // 或者 'cheap-module-eval-source-map'
}

选择合适的

devtool

WebStorm 调试 React 项目时如何配置？

React 项目的调试配置与 Vue 项目类似，都需要确保 WebStorm 能够正确识别 React 组件和 Source Map。

• 安装 React 插件: 在 WebStorm 的 "Settings/Preferences" 中，找到 "Plugins"，搜索并安装 "React" 插件。
• 配置 JavaScript 版本: 在 "Settings/Preferences" 中，找到 "Languages & Frameworks" -> "JavaScript"，将 "JavaScript language version" 设置为 "ECMAScript 6"。
• 配置 Source Map: 确保你的 React 项目已经配置了 Source Map。通常情况下，Create React App 创建的项目已经默认配置了 Source Map。
• 使用 Chrome Debug 配置: 像调试普通 HTML 项目一样，创建一个 "JavaScript Debug" 配置，URL 指向你的 React 项目的入口 HTML 文件。

对于使用 Webpack 构建的 React 项目，你可能需要在 Webpack 配置文件中配置 Source Map。例如：

module.exports = {
  devtool: 'source-map'
}

同样，选择合适的

devtool

总的来说，WebStorm 和 Chrome DevTools 的联动配置并不复杂，但需要仔细检查每个步骤，确保配置正确。一旦配置成功，就能极大地提高前端开发效率。