1.如何在WebStorm 2017下调试Vue.js + webpack
2.DevTool开发者工具
3.webpack之devtool详解
4.devtool使用介绍(1)-devtool add
5.配置Webpack Dev Server 实战操作方法步骤
6.webpack的devtool 配置

如何在WebStorm 2017下调试Vue.js + webpack

       æœ‰äººè§‰å¾—vue项目难调试，是因为用了webpack。所有代码揉在了一起，还加了很多框架代码，根本不知道怎么下手。所以vue+webpack调试要从webpack入手。

       1.我们先从一般情况开始说。

       -sourcemap

       webpack配置提供了devtool这个选项，如果设置为 ‘#source-map’，则可以生成.map文件，在chrome浏览器中调试的时候可以显示源代码。

       devtool: '#source-map'

       2.然而这个设置实际上没这么简单。webpack官方给出了7个配置项供选择:

       .devtool介绍

       è¿™é‡Œä¸åŒçš„配置有些不同的效果，比如是否保留注释、保留行信息等，具体每一条什么意思这里不详解释，有兴趣的童鞋可以参考这篇文章

       å®˜æ–¹é»˜è®¤çš„是用 ‘#cheap-module-eval-source-map’

       devtool: '#cheap-module-eval-source-map'

       è®¾ç½®å¥½ä¹‹åŽï¼Œåœ¨vue项目调试的时候，代码里面标注debugger的时候就能看到对应的代码了，非常方便。

       .debugger

       æˆ–者，直接找到对应的文件。在chrome用 ’ctrl(command) + p‘，输入文件名，可以找到对应的源代码。

       command+p

       æ‰“断点：

       æ–­ç‚¹

       éœ€è¦æ³¨æ„çš„是，这里断点会打在下一行。同时一行代码运行在它的下一行才算执行。

       .-vue-cli

       vue家的项目脚手架，推荐使用。vue-cli老家在这里

       vue-cli可以帮我们自动搭建项目，首先npm全局安装

       npm install -g vue-cli

       ç„¶åŽåˆ›å»ºä¸€ä¸ªæ–°çš„项目

       vue init webpack my-project

       ä¸€è·¯å›žè½¦ï¼Œæžå®šã€‚(更多配置项请参考上面给出的vue-cli链接)

       è¿™é‡Œä»Žç½‘上下载了一个带webpack的vue项目(跑之前记得npm install一下)

       .vue-cli webpack

       ä»Žbulid文件夹里面就大概能看出：

       •webpack.dev.conf: 开发模式用

       •webpack.prod.conf: 生产模式用

       å…¶ä¸­ï¼Œå¼€å‘模式提供了devtool为’#cheap-module-eval-source-map’，生产模式根据config文件夹下的productionSourceMap变量控制是否使用。

       è‹¥ä¸ºtrue，则devtool为’#source-map’

       å…¶ä»–使用方法一致。非常方便。

       3.线上调试

       å¹³æ—¶å¼€å‘的时候，我们用webpack的热加载，可以省去挂载调试的步骤，非常方便。但是发布后部署到服务器上，就失去了这个本地优势。

       å¦‚果使用挂载文件方式会比较麻烦。由于webpack打出来的文件有版本号这些信息，而且发布一个包看代码量可能需要等待不等，这个方案不实际。但是如果挂载的是热加载到端口下的文件的话，这个问题就很好办了。

       -热加载

       åœ¨æ­¤ä¹‹å‰ï¼Œå…ˆæ¥åˆ†æžä¸€ä¸‹webpack的热加载原理。

       å¯¹é¡¹ç›®æŠ“包可以发现这么一个文件：__webpack_hmr

       __webpack_hmr

       è¿™æ˜¯webpack热加载的服务器推送事件，eventsource类型，功能和websocket有点类似。大致作用是建立一个不会停止的stream流链接，服务器发送更新数据回来append到流的末端，前端读取最新append的数据，然后动态的更新页面上的东西。

       æŽ¥ä¸‹æ¥æˆ‘们观察下上文提到的更新数据有哪些。随便更新一个文件，触发热加载，再抓个包，发现有两个.hot-update.json和一个.hot-update.js文件

       çƒ­åŠ è½½æ›´æ–°æ–‡ä»¶

       è¿™äº›å…·ä½“做了些啥我不知道，这里就不深究了。应该是根据json里面的数据，达到一个准确更新的效果。

       æ‰€ä»¥çƒ­æ›´æ–°å…¶å®žå°±æ˜¯ç›‘听服务器上的数据，有修改的话服务器发送数据过来，前端把数据拿来后替换到页面上这么一个过程。

       -AutoResponder

       æŽ¥ä¸‹æ¥è°ˆè°ˆçº¿ä¸ŠæŒ‚载测试，这里推荐一款软件：fiddler

       fiddler有一个功能叫做AutoResponder，它可以将一个地址指向另一个地址。之所以用这个软件，是因为它能匹配正则，非常方便。

       AutoResponder

       ä¸Šä¸€èŠ‚说到，webpack热加载用到了这几类文件

       •__webpack_hmr

       •xxxxxxxxxxx.hot-update.json

       •xxxxxxxxxxx.hot-update.js

DevTool开发者工具

       DevTools，这个前端开发的得力助手，犹如一把多功能瑞士军刀，为开发者揭示网页的秘密。它分为九个强大的组件，每个都扮演着不可或缺的ssc静态源码角色：

Device Mode（设备模式）: 通过快捷键Ctrl+Shift+I（Windows）或Cmd+Opt+I（Mac）一键启动，设备模式允许你模拟真实设备的响应式设计，调整网络环境，甚至模拟地理位置，以便更好地测试用户体验。

Elements（元素面板）: 作为DOM和样式调试的窗口，元素面板让你实时查看和修改网页结构，设置断点，轻松诊断和优化网页表现。

Console（控制台）: 控制台是你的现场指挥中心，无论是调试代码、查看消息，还是执行脚本，这里都是你发现问题和解决问题的前线阵地。

       接下来，让我们深入探讨DevTools的其他功能：

Source Code Panel（源代码面板）: 设置断点，直接在浏览器内查看和操作代码，方便进行代码级的调试。

Network（网络面板）: 网络面板实时监控网络请求，详细展示资源加载过程，提供了强大的缓存管理和网络环境模拟功能，让你洞察网络性能。

Performance（性能面板）: 通过控制选项选择CPU或网络模拟，任务悬赏源码平台Performance面板为你呈现帧率、CPU和网络资源使用情况，火焰图追踪DOM加载、首次绘制和load事件，细节展示每一笔性能开销。

Memory（内存面板）: 内存分析器如同性能的X射线，帮助你识别出内存消耗的瓶颈，优化内存使用。

Application（应用面板）: 在这里，你可以查看和管理Local Storage、Session Storage以及cookies，对用户数据的存储和管理游刃有余。

Security（安全面板）: Security Overview确保你的页面安全，区分HTTP和HTTPS，左边的源详情栏让你对页面的加密状态了如指掌。

       DevTools的每一个部分都是为了提升开发效率，确保网页的性能和安全性。熟练掌握这些工具，你将能在前端开发的道路上如鱼得水，轻松应对各种挑战。

webpack之devtool详解

       关于Devtool

       该选项控制是否以及如何生成源映射。官网上给出的可选值有：

       其中一些值适合开发，一些用于生产。对于开发，您通常需要快速的Source Maps，以bundle的大小为代价，但是麻将智能出牌源码对于生产，您需要独立的Source Maps，这是精确的，并且支持最小化。

       选择一种源映射样式，以增强调试过程。这些值可以显著地影响构建和重建速度。而不是使用devtool选项还可以使用SourceMapDevToolPlugin / EvalSourceMapDevToolPlugin直接有了更多的选择。不要同时使用devtool选项和插件。devtool选项在内部添加了插件，所以你最终会得到应用两次的插件。

       实例详解

       1.新建print.js

       export default function printMe() { console.log('武昌鱼@');}

       2.新建index.js

       import printMe from './print.js';function component() { var element = document.createElement('div'); var btn = document.createElement('button'); btn.innerHTML = 'Click 1me and check 1the console!'; btn.onclick = printMe; element.appendChild(btn); return element;}document.body.appendChild(component());

       3.新建webpack.config.js

       const path = require('path');const CleanWebpackPlugin = require('clean-webpack-plugin');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/index.js', output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') }, plugins: [ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ title: ' webpack之devtool' }) ]};

       4.使用不同的devtool选项

       none

       打包后点击打印按钮，console显示main.js:，生成代码如下所示：

       eval

       eval 模式会把每个 module 封装到eval 里包裹起来执行，并且会在末尾追加注释。

       Each module is executed withevaland//@ sourceURL.

       打包之后点击打印按钮，console显示print.js:3，生成代码如下所示：

       source-map

       打包之后你会发现你的 output 目录下多了一个index.js.map文件，此文件记录了sourceMap 行列信息如何映射源代码的信息。点击打印按钮，console显示print.js:3，生成代码如下所示：

       main.js

       main.js.map

       hidden-source-map

       打包后main.js与 source-map 选项相比少了末尾注释，但 output 目录下的 index.js.map 没有少。点击打印按钮，console显示main.js:。

       inline-source-map

       打包后可以看到末尾的注释 sourceMap 作为DataURL的形式被内嵌进了 bundle中，由于 sourceMap 的所有信息都被加到了bundle中，整个 bundle 文件变得硕大无比。电脑种草社区源码点击打印按钮，console显示print.js:3，生成代码如下所示：

       main.js

       eval-source-map

       和 eval 类似，但是把注释里的sourceMap 都转为了 DataURL。console显示print.js?dc:2，生成代码如下所示：

       main.js

       cheap-source-map

       和 source-map 生成结果差不多。output 目录下的index.js内容一样。但是 cheap-source-map 生成的 index.js.map 的内容却比 source-map 生成的 index.js.map 要少很多代码，我们对比一下上文 source-map 生成的 index.js.map 的结果，发现source属性里面少了列信息，如下所示：

       main.js.map

       cheap-module-source-map

       在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；

       总结

       开发环境推荐使用：

       1.eval ：每个模块使用eval()和//@ sourceURL执行。这是非常快。主要缺点是，它没有正确显示行号，因为它被映射到转换代码而不是原始代码(没有来自加载器的源映射)。

       2.eval-source-map：每个模块使用eval()执行，而SourceMap作为DataUrl添加到eval()中。最初它是缓慢的，但是它提供快速的重建速度和产生真实的文件。行号被正确映射，因为它被映射到原始代码。它产生了最优质的开发资源。

       3.cheap-eval-source-map：与eval-source-map类似，元神源码架设每个模块都使用eval()执行。它没有列映射，它只映射行号。它忽略了来自加载器的源代码，并且只显示与eval devtool相似的经过转换的代码。

       4.cheap-module-eval-source-map：类似于cheap-eval-source-map，在本例中，来自加载器的源映射被处理以获得更好的结果。然而，加载器源映射被简化为每一行的单个映射。

       生产环境推荐使用：

       1.(none) ：(省略devtool选项)-不触发SourceMap。这是一个很好的选择。

       2.source-map：一个完整的SourceMap是作为一个单独的文件。它为bundle添加了引用注释，因此开发工具知道在哪里找到它。

       3.hidden-source-map：与source-map相同，但不向bundle添加引用注释。如果您只希望SourceMaps从错误报告中映射错误堆栈跟踪，但不想为浏览器开发工具暴露您的SourceMap，可以使用此选项。

       4.nosources-source-map：一个SourceMap是在没有源代码的情况下创建的。它可以用于在客户机上映射堆栈跟踪，而不暴露所有源代码。您可以将源映射文件部署到webserver。

devtool使用介绍(1)-devtool add

       devtool是一个命令行工具，其核心功能在于帮助开发者在可扩展SDK中构建、测试和打包软件，甚至通过OpenEmbedded构建系统来定制化构建SDK至镜像中。虽然devtool的主要用途在于可扩展SDK，但其功能也适用于任何需要输出构建的项目。该工具被组织到了Git中，并包含多个子命令，用户可通过执行`devtool --help`查看所有可用命令。

       devtool具有三个主要子命令，它们为开发者提供了切入点，用于构建、测试和打包项目。这些子命令包括`devtool add`、`devtool modify`和`devtool upgrade`。

       `devtool add`命令用于根据现有源代码生成新的recipe。此命令能够生成在工作区内的本地Git存储库中的源代码。若源代码不存在，可以提取代码，如果需要，还可以将其放置在工作空间之外的指定位置。此外，此命令还会创建一个名为recipe的文件以及相应的附加文件。如果未指定recipe名称，命令会尝试自动确定。

       使用`devtool modify`命令，开发者可以指定现有的recipe，从而获取源代码及其修补方法。在构建过程中，这为开发者提供了控制源代码树的能力，并确保构建按照预期进行。

       `devtool upgrade`命令用于更新现有的recipe版本，以适应最新的依赖项和构建系统更改。

       在添加应用程序后，可以通过`devtool edit-recipe`编辑recipe文件，进行必要的修改。然后，开发者可以使用`devtool build`命令构建recipe，或使用`devtool build-image`命令构建包含新软件包的映像。构建后的映像可以部署到目标硬件或设备上进行测试。

       为了检查构建输出在目标硬件上的工作情况，开发者可以使用`devtool deploy-target`命令将映像部署到实时目标计算机，或使用`devtool build-image`命令部署到实际硬件。在完成工作后，可以使用`devtool finish`命令将最终的recipe移至永久层，并将工作空间还原到原始状态。如果决定放弃工作，可以使用`devtool reset`命令恢复源代码树。

配置Webpack Dev Server 实战操作方法步骤

       Webpack Dev Server 的实战配置是前端开发者在本地开发中的便捷工具，它能简化繁琐的编译和预览流程。本文将详细步骤演示如何配置和使用。

       首先，安装最新版本的依赖，确保webpack 5..0、webpack-cli 4.9.2以及webpack-dev-server 4.x。在package.json的scripts部分，添加启动命令"serve"，以简化启动服务的步骤。

       在webpack.config.js文件中，新增devServer节点进行配置。基础配置如设置服务器监听的地址（如http://localhost:）和允许访问的host。此外，devServer还支持跨域代理等功能，具体详情请参考webpack-dev-server官网。

       只需执行yarn serve命令，即可启动webpack dev server。此时，在浏览器访问http://localhost:，你的前端应用就可通过实时编译和刷新，提升开发效率。

       为了提高调试效率，可将devtool配置为source-map，这样在浏览器控制台的错误提示将直接指向源代码，而不是打包后的代码，便于快速定位问题。默认的devtool配置可能会隐藏源码位置，不利于调试。

       此外，Webpack Dev Server支持HMR（热模块替换），即在代码修改时，仅重新编译修改的部分，而不是整个项目。只需在devServer配置中启用hot: true，修改样式时页面将不会刷新，但JavaScript可能需要重启服务才能生效。现代开发工具如vue-loader通常能实现更细粒度的HMR。

       通过以上步骤，你将能够充分利用Webpack Dev Server，提升本地开发的效率和便利性。

webpack的devtool 配置

       devtool配置与代码调试紧密相关，旨在优化调试体验。在前端开发中，源代码经过合并、压缩、转换后，运行的是转换后的代码，这给调试带来了挑战。因此，chrome浏览器率先引入了source map技术，其他浏览器也纷纷跟进，如今几乎所有新版浏览器都支持source map。

       source map本质上是一个配置，它不仅记录了所有源码内容，还记录了源码与转换后代码之间的对应关系，便于开发人员直接定位到源代码中的错误。浏览器处理source map的原理在于解析这个映射关系，从而显示正确的源代码位置信息。

       最佳实践包括：在开发环境中使用source map作为调试工具，避免在生产环境中使用，以防止额外的网络传输和潜在的代码暴露风险。如果在生产环境中使用source map用于调试，需采取措施确保网络传输和代码安全。

       在webpack中，devtool配置可以优化调试体验。使用正确的devtool选项，能够提供不同级别的源码映射，以适应开发与生产环境的需求。例如，"eval"配置选项在开发环境中提供快速构建，同时保留了正确的行号映射，而"cheap"配置在开发环境中提供了较低开销的映射，忽略了列映射信息。

       在生产环境中，通常选择不生成source map，以优化性能。然而，如果需要生成source map，可以选择将它作为单独的文件输出，并在bundle中添加引用注释，以便开发工具查找。此外，还存在一些特定场景的配置选项，如仅生成用于错误堆栈跟踪的source map，或不包含sourcesContent的source map，以保护源代码安全。