chrome调试压缩后的代码

最新推荐文章于 2025-07-07 13:28:09 发布
原创 最新推荐文章于 2025-07-07 13:28:09 发布 · 7.5k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使用Chrome开发者工具调试压缩后的JavaScript代码的方法。通常情况下，前端开发人员会利用Chrome的开发者工具对JavaScript代码进行断点调试。但在没有源代码的情况下，需要调试经过FIS或webpack压缩的代码时，可以通过点击Sources面板下方的prettyprint按钮来格式化代码，进而实现断点调试。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

利用chrome的开发者工具对JavaScript代码打断点调试，是一种常用的前端调试方法。

但有时我们需要对压缩后的JavaScript进行调试，因为现在前端大多采用FIS或webpack进行压缩，如果拿不到JavaScript的源代码，就只能对压缩后的代码进行断点分析。

点击Sources 面板下方的 pretty print 按钮{}，格式化JavaScript代码，然后再打断点调试即可。

这里写图片描述

参考文档：
https://developers.google.com/web/tools/chrome-devtools/javascript/add-breakpoints

【高频考点精讲】前端Source Map：如何调试压缩后的代码？
全栈老李的博客
05-07 759
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。调试线上代码就像在黑暗森林里找路，而Source Map就是那盏照亮黑暗的手电筒。今天全栈老李带大家深入聊聊这个前端工程师的"救命稻草"。
vue项目中debugger调试看不到源码
qq_42177730的博客
04-21 5828
在修改vue项目的问题时，发现代码里面输入debugger后，在浏览器点击操作发现可以进入断点，但显示的是已经压缩好的代码，无法看到源码 。 解决方案： 1 打开vue.config.js文件， 修改productionSourceMap: true, 1 打开vue.config.js文件，添加 devtool: "cheap-module-source-map", 然后重启项目。 ...
Google Chrome debug 加密压缩后的js
u011066523的博客
01-15 713
一直很好奇如何调试加密压缩后的js，偶然看到，做个记录。      按一下左下角的“{}”就可以打断点啦~~~    
巧用Chrome格式化压缩后的js文件
我的地盘
08-23 2174
对于格式化的js文件，可以用chrome处理。 打开chrome浏览器，按F12进入开发者工具界面，找到一个压缩js文件，如图： 在浏览器的底部（左边）的工具栏有一个" { } " 样的图标 ， 点击一下就可以了。   格式后: 格式化的js 也可以 左击保存:
Chrome 低版本浏览器安装
最新发布
weixin_41632847的博客
07-07 266
​​​​​​​​​​​​​​​​​​​​​​​​​​Google Chrome 64bit Windows版_chrome浏览器,chrome插件,谷歌浏览器下载,谈笑有鸿儒。在目标后添加参数 --user-data-dir="D:\Program Files\chrome_107\Chrome-bin\user_data"4. 在电脑安装软件目录新建一个文件夹，例如chrome107,将解压获得的chrome-bin目录复制到chrome107中。3. 解压后获得chrome-bin目录。
谷歌浏览器调试技巧【一】查看被压缩的css和js的压缩，并进行修改
weixin_43837268的博客
08-03 1316
1.选中按钮选中状态 在element中鼠标右键，选择：active 2.监听动态元素的变化 在element中鼠标右键，选择：Break选项中的subtree modification ↵ 选中后，在debugger模式下进行调试 3.触发事件监听 选择element元素后，点击右侧Event Listener，再点击右侧的蓝色字体就可查看触发的事件 4.设...
使用 chrome 调试被压缩的 js 代码
永远相信美好的事情即将发生
01-04 5570
有时候我们会遇到一些网上的压缩js代码，因为被压缩成为了一行所以没有办法打断点。此时我们就可以使用 chrome 自带的开发者工具 Override 对代码进行格式化后然后在想要调试的地方设置断点即可。
chrome调试压缩后代码
wzp20092009的博客
01-29 657
对于压缩后代码，往往都很难调试，也不方便查看代码逻辑 对于此类代码，chrome 开发者模式提供了 【Pretty print】 只需要我们点击，就可以生成格式化的代码方便我们调试了
Chrome调试折腾记之JS断点调试技巧
12-10
总的来说，熟练掌握这些Chrome调试技巧，可以显著提高我们的JS调试效率，帮助我们更快地找到并修复问题。通过不断实践和探索，每个开发者都能成为调试大师。在后续的学习中，还可以进一步了解Chrome DevTools的其他...
chrome调试&代码逆向分析.docx
10-11
### Chrome调试技巧与JS逆向分析 #### 一、Chrome Developer Tools 调试技巧 ##### 1. Beautify JavaScript – 格式化压缩代码 - 在开发过程中，经常遇到为了减小文件体积而在发布前对JavaScript文件进行压缩的...
chrome 调试器小技巧
seven_an的博客
07-20 371
1、日志保存，选中Network里面的preserve log,即使页面跳转，日志也依旧存在。 2、有时候在网页上查看压缩的源码，找不到地方，则可以点一个左下角的{ }，代码就基本是正常的格式的了。
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
12-18 2614
今天在代码里面输出 console.log 信息直接指向了 vue.js，并且代码里面写了 debgger 也不生效。找到这个 ignore list 的 custom exclusion rules 取消掉。f12 找到浏览器的这个设置图标。
详解 Webpack devtools
自然醒
10-08 721
最近在开发一个低代码平台，主要用于运营搭建 H5 活动。这中间涉及到第三方组件的开发，而第三方组件想要接入平台，需要经过我们特定的打包工具来 build。构建之后的组件，会合并成单个的 js 文件，而且代码会被压缩会混淆，这个时候如果需要调试，那就会极其痛苦。想要有一个好的调试环境，就要涉及 SourceMap 的输出，而 Webpack 的 devtools 字段就是用于控制 SourceMap。 SourceMap 原理 在详细解释 devtools 配置之前，先看看 SourceMap 的原理。S
前端冷知识（三）：Chrome调试
baizaozao的博客
10-09 376
1、谷歌浏览器调试窗口，很多调试的js代码都是被压缩过的，格式很乱 有一个超好用的功能，format代码 2、在source窗口搜索文件 ctrl+p
渗透学习-学习记录-利用浏览器的开发者工具实时修改网页前端JS代码（实现绕过）
qq_43696276的博客
01-16 7806
最近学习了一些有关于JS脚本搭建网站方面的安全知识。通常来说JS是前端的页面代码，因此我们可以直接修改前端的JS代码来实现绕过，故我试着做了一下利用浏览器的开发者工具进行尝试修改页面，以此来直接进行绕过的实验，特此记录。
Chrome反压缩JS代码：Pretty Print显示可读代码
Jq的博客
10-27 3852
按快捷键fn+f12,打开检查，点击 Sources中的一个html 或js文件，点击**大括号{}**图标，即可使用Prerry Print功能了。 这时是反压缩后的代码：
Chrome修改调试线上代码
henudxk的博客
03-27 1444
点击 [Select folder for overrides]，会弹出资源选择器，这里选择一个要存放覆盖代码的文件夹，如果没有合适的，可以新建一个，我这里是新建的 debug，然后选中。也可以先执行第三步，即先找到要覆盖的代码，右键选择[Override content]，如果没有保存过文件，会提示选择文件夹，再按第二步的操作。一、打开[Souces] -> [Overrides]，如果看不到，点右侧箭头就可以看到了。找到要覆盖的代码，右键选择[Override content]，就跳到对应文件了。
你所不知道的Chrome调试技巧（下）
qq20004604的博客
11-24 3724
7、格式化代码我们在使用webpack打包的时候，一般会将代码压缩混淆。好处是可以减少代码体积，但坏处是如果打包后报错（比如在测试环境），通过点击console的堆栈跳到代码处，会发现一堆代码无换行杂糅一起，基本无法调试。解决办法chrome浏览器已经提供了，以阿里巴巴的矢量图标库为例。首先打开控制台，进入以下页面（进入方法已经用箭头标注）。 会发现中间区域的代码明显是压缩混淆之后的。格式化代码很
Chrome F12调试技巧：压缩JS代码格式化解决方案
在Chrome开发者工具中，可以通过源代码编辑器（Sources）面板找到相应的JavaScript文件，然后利用工具栏上的格式化按钮，通常是一个像大括号“{}”的图标，来美化和排版压缩后的JavaScript代码。这个功能非常实用，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值