webpack断点调试

最新推荐文章于 2023-07-12 17:32:25 发布
最新推荐文章于 2023-07-12 17:32:25 发布
阅读量1.2k 收藏
点赞数
文章标签： debug webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44823731/article/details/109638415
版权
在自己编写webpack的loader和plugin的时候，我们难免需要进行调试我们的编写的loader和plugin，这时候我们就可以使用webpack的断点调试了。

1.在package.json中添加调试指令

"debug": "node --inspect --inspect-brk node_modules/webpack/bin/webpack.js"

2.在我们需要进行断点的地方加上debugger。

在这里插入图片描述

3.执行npm run debug命令

在这里插入图片描述

4.在谷歌浏览器中打开控制台，任意页面都行

在这里插入图片描述

5.进去之后会开一个窗口，然后就跟我们平常调试一样

冬天爱吃冰淇淋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
webpack中编写自定义loader和plugin,及如何调试(debug)webpack,vuecli等脚手架
codingWeb的博客
08-29 2199
debug(调试)webpack: 因为plugin和loader的编写需要nodejs环境,需要追踪一些参数,这时候调试就显得很重要了,但调试webpack不像在浏览器中debug那么轻松,需要一些配置: 首先在package.json中加入如下代码: 改命令表示调试webpack并停在第一行 "scripts": { "start": "node --inspect-brk ./node_modules/webpack/bin/webpack.js" } 调试分为两种: 浏览器中调试
webpack常见调试问题
qq_41117240的博客
03-19 1220
webpack打包常见问题 问题一： peerDependencies WARNING webpack-dev-server@* requires a peer of webpack@^4.0.0 || ^5.0.0 but webpack@3.8.1 was installed peerDependencies WARNING webpack-dev-server@3.10.3 › webpac...
详解webpack打包后如何调试的方法步骤
12-12
webpack.config.js 在配置devtool时，webpack给我们提供了四种选项 source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度； cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。 eval-source-map:使用eval打包源文件模块，在同一个文件中生产干净的完整版的sourcemap，但是对打包后输出的JS文件的执行
webpack调试方法
路漫漫其修远兮~
08-13 1104
asd
webpack debugger调试
黄彪博客
01-31 2208
文章目录问题描述解决办法vscode debugger 调试 问题描述 在写webpack配置文件的时候，想了解一些变量的详情，因此，需要debugger调试nodejs 解决办法 Nodejs 使用 Chrome DevTools 调试 --inspect-brk "debugger": "node --inspect --inspect-brk build/server.js --open"...
webpack打包去掉 debugger和console
yjl13598765406的博客
11-24 783
webpack打包去掉 debugger和console
webpack 错误
qq_27009517的博客
03-09 910
PS D:\front-end-interview\webpack\WebpackDemo-master\demo4Me\style> webpack D:\front-end-interview\webpack\WebpackDemo-master\demo4Me\style\node_modules\html-webpack-plugin\lib\webpack5\file-watcher-api.js:13 mainCompilation.fileSystemInfo.crea...
浅谈vue+webpack项目调试方法步骤
08-29
在调试Vue+Webpack项目时，理解它们的工作原理和调试方法是至关重要的。本文将详细探讨如何进行有效的调试。 首先，Webpack是一个模块打包工具，它能够将JavaScript、CSS、图片等各种资源打包成一个或多个可部署的...
浅析Visual Studio Code断点调试Vue
01-19
个人还是更加习惯于断点调试。这篇文章将介绍如何配置 Visual Studio Code 和 Chrome 来完成直接在 VS Code 断点调试代码, 并且在VS Code的调试窗口看到Chrome中console相同的值。 设置 Chrome 远程调试端口 首先...
通过实例解析vuejs如何实现调试代码
10-15
这样，你就可以在VSCode中设置断点，查看变量值，跟踪调用栈等，实现高效调试。 总的来说，Vue.js的调试涉及到项目配置、source map的使用以及现代编辑器的集成。理解这些概念和技巧，将极大地提高你的开发效率和...
vscode使用技巧——webpack项目的断点调试
sayUonly的博客
10-12 1871
为了方便调试，我研究了一下如何使用vscode进行断点调试。本次尝试已在html-template项目中测试通过。 安装插件 在vscode的插件商店安装必要的插件“Debugger for Chrome”。 调整webpack配置 在webpack.dev.config.js文件中，增加source map的配置。 module.exports = webpackMerge.merge(webpackBase, { devtool: 'eval-source-map' }); 配置启动项 点击“菜
使用webpack-dev-server自动打包并实现debug调试
weixin_43794897的博客
12-11 4970
webpack-dev-server 是一个开发服务器，它的功能就是可以实现热加载，并且自动刷新浏览器 准备工作： 创建一个程序目录test，将html页面拷贝进来，在目录下新建src、dist目录 将main.js（入口js文件）、vue.min.js以及model.js拷贝到src目录下 安装webpack-dev-server 使用webpack-dev-server需要安装webpack...
webpack 调试_我如何通过试错，一些外部帮助来解决和调试Webpack问题。
cumian9828的博客
07-24 1448
webpack 调试by Margarita Obraztsova 玛格丽塔(Margarita Obraztsova) 我如何通过试错，一些外部帮助来解决和调试Webpack问题。 (How I solved and debugged my Webpack issue through trial, error, and a little outside help.) I would say ...
如何使用webpack打包vue2项目
J_Linf的博客
07-12 784
【代码】如何使用webpack打包vue2项目。
js逆向笔记webpack断点笔记
weixin_46468720的博客
10-20 415
例如，188模块中，调用了175模块(n(175))，要定位到175模块的代码，需要在return e(t).call(r.exports,r,r,exports,f)处打断点，其实此时的n(175)，就是加载器的f(175),关于模块加载器代码分析上一篇博文有记录。1.webpack遇到扣出来的模块A还调用其它模块B的时候，还要定位到B模块并把代码扣出来的情况。跟进去的方法有两种：1，鼠标放到n.n上点击进去。2.在控制到输入n.n，在出现的结果中点击进去。
解决webpack : 无法加载文件
AyayaOVO的博客
10-22 505
** 解决webpack : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本。有关详细信息， 请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。** PS F:\MY xiangmu> set-ExecutionPolicy RemoteSigned 执行策略更改 执行策略可帮助你防止执行不信
webpack学习笔记
前端小白
02-09 65
webpack配置
webpack打包过程如何调试？
cnmik42448的专栏
10-21 439
本文适用于已经会使用webpack的前端开发人员，但是想进一步了解webpack细节和进阶。 首先请读者按照我前一篇文章 Webpack 10分钟入门介绍的步骤，在本地搭建一个webpack的hello w...
node+webpack+react 开发环境下断点调试打包监控进程相关
12-18 472
react 开发环境下断点调试 :   打包后的文件图分析   直接打开浏览器插件     const OpenBrowserPlugin = require('open-browser-webpack-plugin')     plugins: [         new webpack.DefinePlugin({             'proc...
vue断点调试debugger
最新发布
09-14
您可以使用Vue官方提供的两种方式进行Vue断点调试： 方式一是使用Vue Dev＊＊＊助您调试Vue应用。您可以在浏览器的开发者工具中找到Vue Devtools插件。安装后，您可以在开发者工具中查看Vue组件的状态和数据，并...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值