chrome调试压缩后的代码

最新推荐文章于 2024-03-27 11:00:18 发布
最新推荐文章于 2024-03-27 11:00:18 发布
阅读量7.4k 收藏 3
点赞数 1
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/koastal/article/details/72677850
版权

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

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

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

这里写图片描述

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

koastal
关注
专栏目录
vue项目中debugger调试看不到源码
qq_42177730的博客
04-21 5483
在修改vue项目的问题时，发现代码里面输入debugger后，在浏览器点击操作发现可以进入断点，但显示的是已经压缩好的代码，无法看到源码 。 解决方案： 1 打开vue.config.js文件， 修改productionSourceMap: true, 1 打开vue.config.js文件，添加 devtool: "cheap-module-source-map", 然后重启项目。 ...
详解 Webpack devtools
自然醒
10-08 637
最近在开发一个低代码平台，主要用于运营搭建 H5 活动。这中间涉及到第三方组件的开发，而第三方组件想要接入平台，需要经过我们特定的打包工具来 build。构建之后的组件，会合并成单个的 js 文件，而且代码会被压缩会混淆，这个时候如果需要调试，那就会极其痛苦。想要有一个好的调试环境，就要涉及 SourceMap 的输出，而 Webpack 的 devtools 字段就是用于控制 SourceMap。 SourceMap 原理 在详细解释 devtools 配置之前，先看看 SourceMap 的原理。S
Google Chrome debug 加密压缩后的js
u011066523的博客
01-15 690
一直很好奇如何调试加密压缩后的js，偶然看到，做个记录。      按一下左下角的“{}”就可以打断点啦~~~    
巧用Chrome格式化压缩后的js文件
我的地盘
08-23 2113
对于格式化的js文件，可以用chrome处理。 打开chrome浏览器，按F12进入开发者工具界面，找到一个压缩js文件，如图： 在浏览器的底部（左边）的工具栏有一个" { } " 样的图标 ， 点击一下就可以了。   格式后: 格式化的js 也可以 左击保存:
谷歌浏览器调试技巧【一】查看被压缩的css和js的压缩，并进行修改
weixin_43837268的博客
08-03 1239
1.选中按钮选中状态 在element中鼠标右键，选择：active 2.监听动态元素的变化 在element中鼠标右键，选择：Break选项中的subtree modification ↵ 选中后，在debugger模式下进行调试 3.触发事件监听 选择element元素后，点击右侧Event Listener，再点击右侧的蓝色字体就可查看触发的事件 4.设...
使用 chrome 调试被压缩的 js 代码
永远相信美好的事情即将发生
01-04 5169
有时候我们会遇到一些网上的压缩js代码，因为被压缩成为了一行所以没有办法打断点。此时我们就可以使用 chrome 自带的开发者工具 Override 对代码进行格式化后然后在想要调试的地方设置断点即可。
chrome调试压缩后代码
wzp20092009的博客
01-29 582
对于压缩后代码，往往都很难调试，也不方便查看代码逻辑 对于此类代码，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版本
10-13
【压缩包子文件的文件名称列表】：虽然具体文件内容未给出，但可以推断，这个压缩包可能包含了小米快游戏调试器的安装程序、相关文档、可能还有与CocosCreator或Chrome浏览器版本79兼容的配置文件。解压后，开发者应...
chrome 调试器小技巧
seven_an的博客
07-20 341
1、日志保存，选中Network里面的preserve log,即使页面跳转，日志也依旧存在。 2、有时候在网页上查看压缩的源码，找不到地方，则可以点一个左下角的{ }，代码就基本是正常的格式的了。
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
12-18 2519
今天在代码里面输出 console.log 信息直接指向了 vue.js，并且代码里面写了 debgger 也不生效。找到这个 ignore list 的 custom exclusion rules 取消掉。f12 找到浏览器的这个设置图标。
前端冷知识（三）：Chrome调试
baizaozao的博客
10-09 343
1、谷歌浏览器调试窗口，很多调试的js代码都是被压缩过的，格式很乱 有一个超好用的功能，format代码 2、在source窗口搜索文件 ctrl+p
Chrome修改调试线上代码
最新发布
henudxk的博客
03-27 991
点击 [Select folder for overrides]，会弹出资源选择器，这里选择一个要存放覆盖代码的文件夹，如果没有合适的，可以新建一个，我这里是新建的 debug，然后选中。也可以先执行第三步，即先找到要覆盖的代码，右键选择[Override content]，如果没有保存过文件，会提示选择文件夹，再按第二步的操作。一、打开[Souces] -> [Overrides]，如果看不到，点右侧箭头就可以看到了。找到要覆盖的代码，右键选择[Override content]，就跳到对应文件了。
你所不知道的Chrome调试技巧（下）
qq20004604的博客
11-24 3640
7、格式化代码我们在使用webpack打包的时候，一般会将代码压缩混淆。好处是可以减少代码体积，但坏处是如果打包后报错（比如在测试环境），通过点击console的堆栈跳到代码处，会发现一堆代码无换行杂糅一起，基本无法调试。解决办法chrome浏览器已经提供了，以阿里巴巴的矢量图标库为例。首先打开控制台，进入以下页面（进入方法已经用箭头标注）。 会发现中间区域的代码明显是压缩混淆之后的。格式化代码很
Chrome谷歌浏览器在DevTools中调试JS代码格式化
O(∩_∩)O哈哈~
02-23 1802
格式化Chrome浏览器中DevTools视图中调试的JS
C++源程序的压缩和解压
程序设计
09-28 1093
实验1：C++源程序的压缩和解压 一、必做内容: (一）压缩器 1．为了提高C++源程序的可读性，C++程序在书写过程中加入了空行、空格、缩进、注释等。假设你想牺牲可读性，以节省磁盘空间，那么你可以存贮一个删除了所有不必要空格和注释的C++源程序的压缩文本。 2.由于C++源程序是由一些具有特定功能的单词组成的，因此我们可以采用转换为编码的方法来进一步实现减小源文件大小的压缩功能。 为了实现这一效果，我们可以先把C++源代码中的各类单词(记号）进行拼装分离，并进行编码的转换。说明:C++语言包含了几种类型
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值