ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

谷歌浏览器禁用JavaScript与Console控制台调试实战指南

谷歌浏览器禁用JavaScript与Console控制台调试实战指南 你是不是也遇到过这种时候网页上一个大弹窗怎么关都关不掉视频转了个方向脖子快扭断了想复制一段文字结果右键被屏蔽又或者自己写的页面一打开就报错在谷歌浏览器里折腾半天也不知道去哪看问题。这几个场景看起来八竿子打不着但背后都指向同一个东西——JavaScript以及谷歌浏览器里那个常被忽略的“控制台”。这篇就来把两件事讲透怎么在谷歌浏览器里禁用 JavaScript以及控制台到底怎么用。不是给你甩一堆官方文档而是把我实际调试页面时用得最多的操作、踩过最深的坑、以及一些“搜索都搜不明白”的小技巧掰开揉碎了讲一遍。适合刚开始接触前端调试的新手也适合偶尔被网页交互搞烦了、想自己动点手的普通用户。顺便说一句这里讲的控制台特指 Chrome 开发者工具里的 Console 面板不是 Windows 磁盘管理控制台也不是游戏里的控制台别被搜索关键词带跑了。1. JavaScript 在页面里到底扛着什么活1.1 从“毛坯 HTML”说起要理解为什么要禁用 JavaScript首先得知道它在一张网页里是什么角色。你可以把网页想成一套毛坯房HTML 是房子的结构和承重墙哪个区块是标题、哪个区块是文章、图片放在哪都是 HTML 说了算CSS 是装修给墙面刷漆、给客厅摆沙发让页面看起来像样而 JavaScript 是水电和智能家居系统它负责让所有东西“动起来”。灯为什么能亮、空调为什么能调温度、门铃为什么能响靠的是 JavaScript 在背后控制。网页也是一样按钮点击后的反馈、表单提交前的校验、轮播图的自动播放、下拉菜单的展开收起、滚动时加载更多数据——这些交互几乎都是 JavaScript 一句一句跑出来的。所以一旦你把 JavaScript 禁用就相当于关掉了房子的总电闸。房子还在结构还在装修也还在但所有需要“用电”的功能全都不工作了。这也解释了为什么你在某些网站看到白屏、找不到内容、点按钮没反应很多时候不是网站坏了而是 JavaScript 没跑起来。1.2 为什么有人要禁用 JavaScript你可能会想既然 JavaScript 这么重要为什么还要手动把它关掉这里我列举几个最典型的场景第一个场景是看文章被弹窗和遮罩烦到。很多新闻类、小说类网站页面加载完先弹出个登录框、关注公众号的二维码或者铺一层半透明的遮罩点哪都跳广告。这些弹窗十有八九是 JavaScript 控制的。把 JavaScript 禁掉再刷新页面往往就干干净净正文也能正常读完。第二个场景是网页禁止选中文字、禁止右键复制。有些资料站为了防止内容被复制会在脚本里屏蔽 oncopy、oncontextmenu 事件。禁用 JavaScript 之后这些屏蔽逻辑直接失效文字想怎么选就怎么选。第三个场景是提升浏览体验和降低资源占用。有些页面塞了一堆特效、轮播、埋点脚本配置差一点的电脑打开风扇就开始转。临时关掉 JavaScript 之后页面加载速度能明显快一截适合只想快速看文字内容的场景。第四个场景是前端开发和测试。我就是干这个的经常需要验证一个网站或自己写的项目在没有 JavaScript 的情况下会怎么显示、降级是否优雅。比如做了个官网要保证禁用 JS 后基础内容仍然可读这时候就得频繁切换 JS 开关。1.3 禁用 JS 之前要做的心理准备说完好处得泼盆冷水。禁用 JavaScript 并不是万能钥匙尤其是现在的网站大部分是 Vue、React 这类框架做的单页应用。这类网站有个特点HTML 里只有一个空壳 div所有内容都是靠 JavaScript 动态渲染出来的。你一旦把 JS 关掉刷新后看到的就是彻彻底底的白屏连一个字都没有。这时候别慌不是你电脑坏了也不是网站挂了而是网站团队压根就没做“无 JS 降级方案”。另外如果某个网站依赖 JavaScript 做登录、支付、提交表单这些操作在禁用状态下也全部无法完成。所以要记住一个原则禁用 JS 适合“临时看看内容”“绕过恼人的交互限制”“快速验证降级表现”但不适合作为日常上网的默认设置。2. 谷歌浏览器禁用 JavaScript 的三种实操路径2.1 临时禁用DevTools 命令面板最快先讲我最常用、也最推荐的方式它只对当前标签页生效用完就能恢复不会影响其他网站。操作步骤在谷歌浏览器里打开你想要禁用 JavaScript 的页面。按 F12 打开开发者工具。如果你的 F12 被网站屏蔽了用快捷键 CtrlShiftIWindows或 CommandOptionIMac。在开发者工具里按 CtrlShiftPWindows或 CommandShiftPMac打开命令面板。输入 JavaScript在出现的命令列表里找到 Disable JavaScript。敲一下回车然后关闭命令面板。刷新当前页面JavaScript 就被禁用了。这一招的精髓在于快整个过程几秒钟就完成。它会持续作用于当前标签页刷新页面后依然保持禁用。想恢复的话再打开命令面板输入 JavaScript选择 Enable JavaScript 回车刷新页面就恢复正常了。有一个细节容易踩坑命令面板里的输入框是模糊匹配你输入 java 或者 disable java 也能找到但别选错成 Disable cache那关的是浏览器缓存不是 JavaScript。我第一次用的时候手滑点错过排查了半天才发现页面一直不刷新是缓存没关对地方。2.2 针对单个站点地址栏“站点设置”如果某个网站是你日常必逛的每次进去都想禁 JS那每次手动开 DevTools 就有点烦了。这时候可以针对这个网站做永久性设置。操作步骤打开目标网站。点击地址栏左侧的锁形图标或者带有“查看网站信息”字样的图标。在弹出的菜单里找到“网站设置”并点击。在新打开的页面里找到“JavaScript”这一项把默认的“允许”改成“阻止”。回到网站刷新页面生效。这种方式的好处是以后每次打开这个网站都会自动禁用 JavaScript不用来回折腾。它只影响你设置的这个域名其他网站全部不受影响所以相对安全。想恢复的时候回到同样的设置页面把“阻止”改回“允许”就行。需要提醒的是Chrome 不同版本的界面措辞不完全一样有的版本叫“网站设置”有的版本直接显示“权限”但核心路径都是“锁图标 → 网站设置 → JavaScript”。只要认准这个逻辑版本差异不会难倒你。2.3 全局默认关闭chrome://settings 里的 JavaScript 选项如果你是想彻底一点所有网站默认都不允许运行 JavaScript那就改全局设置。操作步骤在地址栏输入 chrome://settings/content/javascript 并回车。找到“默认行为”这一项把“网站可以使用 JavaScript”切换成“不允许网站使用 JavaScript”。如果你只是想给少数几个网站开权限可以在“不允许使用 JavaScript 的网站”区块里添加例外或者在“允许使用 JavaScript 的网站”里加白名单。全局关闭 JavaScript 之后浏览器会变成一个比较“原始”的浏览工具。大多数新闻文章、博客、文档站还能正常阅读但凡是需要登录、购物、刷视频、管理后台的网站基本就废了。所以我个人不太建议全局关闭最好是按站点精细化设置或者用第 2.1 节的临时方案。这里顺手补充一个适合折腾型玩家的进阶思路可以用浏览器的调试启动参数比如在快捷方式里加上 --disable-javascript 参数启动 Chrome效果等同于全局禁用。但我实际用下来觉得日常很不方便因为想开回来还得重启浏览器。这个参数更适合跑自动化测试或者给无头浏览器Headless Chrome做页面渲染验证普通用户没必要费这个劲。2.4 禁用 JS 后的实测现象与注意事项禁用了 JavaScript刷新页面具体会观察到一些什么现象这是我实测后的记录现象原因页面一片白屏啥内容都没有网站完全依赖 JS 渲染HTML 只是空壳页面内容能显示但图片懒加载不出现懒加载机制依赖 JS 监听滚动触发文章文字可以正常选中复制了复制限制的脚本不再执行弹窗、遮罩、登录引导消失这些基本都是 JS 动态生成的点击按钮没反应按钮事件绑定的代码没有执行图片轮播停住不动轮播逻辑由 JS 控制表单无法提交提示不出现表单校验和提交逻辑全是 JS 写的这些现象本身没有好坏之分取决于你当时的需求。比如我就是为了复制一篇资料文章那禁 JS 之后文字随便选体验反而更好但如果我是想抢一张票、想提交一个订单禁 JS 就直接把自己锁在门外了。另外还有个很容易被忽略的事禁用 JS 后浏览器地址栏前面的锁形图标可能发生变化部分依赖 JS 的 HTTPS 检测、混合内容警告也会表现不同。这属于正常现象不用紧张。3. 控制台基础打开姿势、界面布局与高频命令3.1 打开控制台的几种姿势控制台的打开方式有好几种我按使用频率排个序最简单粗暴按 F12或者在页面任意位置右键选择“检查”。不分平台的安稳方案按 CtrlShiftIWindows或 CommandOptionIMac直接打开开发者工具并定位到最后一次使用的面板。菜单入口点击浏览器右上角三个点 → 更多工具 → 开发者工具。在开发者工具内部如果你已经在 Elements、Sources 等其他面板直接点顶部导航栏里的 Console 标签页就行。在控制台面板里按 Esc可以呼出底部辅助面板用于在 Elements 等界面里直接执行临时 JS 命令。说句题外话有些网站会屏蔽 F12 和右键菜单这时候未必是浏览器出了问题很可能只是网站作者给自己加了点“防护”。我知道你们对怎么破感兴趣这个我在第 4 章详细讲因为它和禁用 JavaScript 能形成一套组合拳。3.2 控制台界面和日志类型控制台面板长得不复杂但第一次打开可能会觉得乱。简单拆解一下最上面是工具栏里面有清空按钮、过滤器、日志级别筛选。日志级别包括 Verbose、Info、Warnings、Errors对应代码里的 console.debug、console.info、console.log、console.warn、console.error。如果你只想看报错就把级别切到 Errors能省很多噪音。中间的大块区域就是日志列表了。页面里所有 console.log、console.warn、console.error 输出都会出现在这里同时也会显示网络请求失败、语法错误、运行时异常等信息。右侧有一个小齿轮图标点开是控制台设置。我建议把“保留日志”勾上这样刷新页面时控制台不会被清空能把刷新前的报错留下来慢慢看。这个钩子在排查“页面刷新后报错”时特别有用默认不勾很多人刚接触时经常错过关键报错信息。3.3 高频命令速查选元素、改样式、取信息控制台最基本的能力就两件事往里写 JS 代码立刻看到结果。它就像一个无限次免费试用的 JS 试验场你可以随便写、随便跑不影响页面里的正式代码。我最常用的一组命令是// 选中页面中的第一个 video 元素 document.querySelector(video); // 选中所有 img 元素返回一个类数组 document.querySelectorAll(img); // 在控制台里querySelectorAll 有一个更简短的别名 $$ $$(a); // 修改选中元素的样式 const btn document.querySelector(.btn); btn.style.background #ff0000; btn.style.display none; // 获取页面标题、当前网址、Cookie document.title; location.href; document.cookie;这里必须强调一个我自己踩过的坑querySelector 是大小写敏感的。网上很多教程代码里写成 document.queryselector浏览器其实不会认会直接报 undefined is not a function。我在很多技术群看见新手被这个错卡住其实只要把 S 改成大写就好。另外还有一个很神奇但冷门的功能$0。在 Elements 面板里选中某个元素后回到控制台输入 $0就能拿到这个元素本身。$1 是上一次选中的$2、$3、$4 依此类推。选中页面元素然后快速在控制台里改它的样式这招比盯着一长串选择器写方便得多。3.4 一个真实案例一句话把旋转 90 度的视频掰回来最近热搜里那条 JavaScript 视频旋转代码其实就是控制台能力的典型应用。原代码大概是这个意思const v document.querySelector(video); v.style.rotate -90deg;它的作用很简单找到页面里第一个 video 标签然后把它的 CSS rotate 属性设置为 -90 度。听起来像魔法其实就是控制台在改页面元素的样式。我实际用过一次。有一次帮家里老人调试在线课程视频视频源大概是横屏拍摄的播放器却只给了一个竖屏窗口画面直接被裁掉一半老人看得干着急。我在控制台里敲了两行代码把视频旋转 90 度画面立刻正了过来。要注意两个细节。第一CSS 的 rotate 属性是近几年新出的独立角度属性写法更简洁但旧浏览器可能不支持。如果你想兼容老掉牙的浏览器可以改成 transform 写法const v document.querySelector(video); v.style.transform rotate(-90deg);第二旋转之后视频可能还是会超出播放器容器显示效果未必完美。它更适合应急让画面方向先对了再说真要长期解决还是得找播放器设置或视频源重新导出。另外我得提醒一句现在新版 Chrome 对地址栏里直接粘贴 javascript: 开头的代码做了安全限制很多时候不执行甚至会被当成搜索内容。所以这类操作最好统一在控制台里做别再去地址栏折腾了。3.5 工程师常用的几条调试技巧说实话靠 console.log 打日志是入门玩法进阶一点的技巧能让你少加班。我列几个实际用得上的console.table打印数组或对象时用表格形式展示。比如 console.table(document.scripts) 可以清晰看到页面加载了哪些脚本。这个比 console.log 一长串列表要直观得多。console.dir把 DOM 元素当作对象展开能看到它的所有属性和方法。普通 console.log 打印一个 DOM 元素显示的是 HTML 标签点开也看不到太多信息console.dir 则完全不同。console.time 和 console.timeEnd给一段代码执行时间计时。比如 console.time(循环); ... console.timeEnd(循环)控制台直接输出耗时。排查性能问题挺实用。copy()控制台全局函数可以把一个值复制到剪贴板。比如 copy(document.title)或者复制一张图片的链接很方便。debugger在代码里写一行 debugger浏览器执行到这一行时会自动停在调试器上。这是代码层面的断点比自己手动去 Sources 面板打断点快。monitorEvents可以监听某个元素的事件。比如 monitorEvents(document, click) 会打印页面上所有点击事件。但实际项目里我很少用因为打印太吵容易看花眼。还有一个小技巧控制台支持断点调试。你可以不用 console.log 而是在 Sources 面板里点一下行号打断点刷新页面代码就会停在那一行。这时候可以看作用域变量、调用栈、单步执行。排查复杂 bug 时断点比 console.log 靠谱得多。4. 网页禁止控制台怎么办合规调试思路4.1 网站是怎么把控制台“关掉”的你见过那种一按 F12 就弹出一个空白页面、或者一直触发 debugger 断点、或者右键菜单直接消失的网站吗这不是 Chrome 出问题了而是网站作者用 JavaScript 做了一个“控制台禁用”的效果。常见的手法有这么几种监听 keydown 事件捕获 F12、CtrlShiftI、CtrlShiftJ 等组合键然后阻止默认行为。监听 contextmenu 事件阻止右键菜单弹出。写一个无限 debugger 循环比如在代码里不断调用 debugger 语句导致开发者工具打开就卡在断点上。检测窗口尺寸和 DOM 变化推断出开发者工具被打开了然后跳转页面或清空内容。重写 console.log 等输出方法让你在控制台看不到任何日志。这些手法本质上都是 JavaScript 在运行所以它们也不是没有弱点。这里就回到我们最开始讲的禁用 JavaScript——你把 JS 一关这些“防护”脚本全部失效了。4.2 三种合法绕过思路先说清楚这里讨论的都是你在自己电脑上、对浏览器行为做调试的常规操作。合法的前端调试、学习、个人页面优化都是正常需求。我不主张拿它去做任何侵犯他人权益、破解认证、绕过付费的事。第一种绕过键盘快捷键限制F12 被屏蔽了不代表真的打不开。可以点浏览器右上角三个点 → 更多工具 → 开发者工具也可以按 CtrlShiftI。很多网站只屏蔽了单独的 F12没屏蔽组合键。第二种先禁用 JavaScript 再打开控制台这就是本篇文章标题把两件事放一起的真正原因。你可以先按第 2 章的方法通过命令面板临时禁用 JavaScript然后刷新页面。刷新后页面里用来禁控制台的脚本全都不执行了这时候你再打开开发者工具完全畅通无阻。想恢复就再开启 JavaScript 刷新页面并不会破坏任何东西。第三种对付无限 debugger如果打开控制台后被一个 debugger 断点卡住先别直接关闭。在 Sources 面板里找到“Deactivate breakpoints”按钮图标是一个被斜线划掉的暂停符号快捷键是 CtrlF8。点一下之后所有断点都会被暂时禁用无限 debugger 循环就卡不住你了。有版本里按钮位置不一样但关键词就是“Deactivate breakpoints”。4.3 遇到“右键禁用”时怎么处理右键菜单被禁是新手最容易碰到的场景。最常见的需求其实就是想复制一段文字或者想用“检查”看某个元素。处理思路分两种情况如果你只是想临时解锁右键可以在已经能打开控制台的情况下执行一行 JSdocument.oncontextmenu null;这个命令会把页面里绑定的 oncontextmenu 处理函数清掉之后右键菜单就能正常弹出来了。如果页面用的是 addEventListener 绑定的右键事件这招不一定管用那还是老老实实走“禁用 JS 再刷新”的路线更彻底。还有些网站会监听鼠标按下、抬起事件来判断是不是右键。这种更隐蔽普通用户没有必要去破解直接禁 JS 刷新看内容就可以。4.4 安全提示不要乱粘贴来路不明的控制台代码讲了这么多控制台玩法最后必须认真提醒一句控制台里的代码拥有当前页面的完整权限你让它干嘛它就干嘛。很多网站会在控制台里打印一段话“不要在控制台粘贴未知代码”甚至在 console.log 里藏一段广告或提示。这些不是吓唬你。一个恶意脚本在控制台里执行后完全可以读取你的登录态、修改页面内容、伪造表单、往你的浏览器里塞东西。很多“免费刷课”“自动领红包”“帮你抢票”的脚本本质上是让你把危险代码手动粘贴到自己的控制台里跑等于你自己把家门钥匙交给了陌生人。所以我的底线是只运行你自己写得出来的、看得懂的代码只运行你信任的教程里明确解释用途的代码网上别人甩给你一段解释不清的代码多好都别碰。5. 常见报错与排查实录5.1 控制台里的四类常见信息控制台输出信息按严重程度分几档普通日志是黑色文字来自 console.log提示是蓝色来自 console.info警告是黄色来自 console.warn错误是红色来自 console.error也会显示网络请求失败和未捕获异常。不要一看到红色就慌多数报错其实是小问题。我的经验是先看报错的具体文字再看它出现在哪一行、哪个文件最后看它是什么类型的错误。盲目搜索报错原文往往浪费时间因为你网站里的变量名、接口路径跟别人根本不一样。另外注意控制台里还可能出现带感叹号的网络错误比如 Failed to load resource: the server responded with a status of 404。这种是资源加载问题不是 JavaScript 代码逻辑问题排查方向和脚本报错完全不同。5.2 运行时报错的定位思路最高频的几种 JS 运行时报错我直接列出来并附上排查思路报错信息含义排查方向Uncaught ReferenceError: xxx is not defined变量 xxx 没定义拼写错误、变量没声明、作用域不对Uncaught TypeError: Cannot read properties of null在 null 上读取属性选择器没找到元素或接口数据为空Uncaught TypeError: Cannot read properties of undefined在 undefined 上读取属性对象不存在或深层属性缺失Uncaught TypeError: xxx is not a function把非函数当函数调用变量名冲突、引入库顺序不对Uncaught SyntaxError: Unexpected token语法错误括号不匹配、少写逗号、引号用了中文符号Failed to load resource: 404资源找不到路径错误、文件被删、服务器返回错误碰到这些报错第一个动作是点一下报错右侧的文件名和行号跳到 Sources 面板看上下文代码。第二个动作是看报错是在页面加载时发生还是点击某个按钮后发生——后者往往对应事件绑定问题。第三个动作是用 console.log 把相关变量打出来确认数据是什么形态。5.3 静态资源有没有加载成功两条检查路径“检查静态资源是否加载完成”是前端调试里特别常见的需求。比如页面样式突然乱了、图片显示不出来、脚本执行了但没效果都要先确认资源是否真的加载成功。最直观的方法是切到 Network 面板刷新页面然后在上方过滤器里点击 JS、CSS、Img 等分类。红色条目就是加载失败的资源灰色条目往往是取消的预加载。点击任意一条资源可以在右侧看到请求地址、响应状态码、Content-Type、耗时等详细信息。如果你不想切面板也可以在控制台里执行performance.getEntriesByType(resource);这个命令会返回一个包含所有资源加载信息的数组里面有 name资源地址、duration加载耗时、transferSize传输大小等字段。用 console.table 包一层看起来特别直观。我个人经常用这条命令查图片资源有没有被正确加载比一个个看 Network 面板快得多。如果想在资源加载失败时自动捕获可以注册一个捕获阶段的 error 监听window.addEventListener(error, function (e) { console.log(捕获到资源加载错误, e.target.src || e.message); }, true);注意这里要传第三个参数 true走捕获阶段。因为很多资源加载错误根本不会冒泡到 window不开启捕获就拿不到事件。5.4 关于“谷歌浏览器打不开网页”等搜索问题的排查搜到这里的时候你可能不只是想学控制台而是浏览器本身遇到了一些问题。虽然这些大多和 JavaScript、控制台没有直接关系但我顺手整理几个最常见的情况和排查思路按优先级排列第一很多“打不开网页”其实是浏览器设置或者扩展插件闹的。排查办法先开一个隐身窗口试试如果能打开问题多半出在某个扩展上。逐个禁用扩展再刷新确认把有问题的删掉就行。第二DNS 解析缓存出问题。浏览器访问网页时会先做域名解析缓存坏了会出现明明网络正常却打不开网页的情况。Windows 上可以打开命令行执行 ipconfig /flushdns 清一下 DNS 缓存再重新访问。第三系统时间不对。这个很多人想不到系统时间跟真实时间差太多会导致 HTTPS 证书验证失败浏览器会直接拦截页面。把系统时间改成自动同步问题立刻就能解决。第四浏览器设置被恶意改写。比如主页被劫持、搜索引擎被锁定多半是装软件时带了流氓插件。这种做法就是改“启动时打开的网页”和“搜索引擎”在设置里手动改回来同时卸载掉可疑的扩展和软件。5.5 控制台使用中容易踩的几个小坑下面这些坑基本都是我自己或者身边同事踩过的每一个都值得单独拿出来说先说选择器坑。document.querySelector 返回的是第一个匹配元素很多人以为它会返回所有匹配元素结果命令跑完发现页面没变化。想操作多个元素要用 document.querySelectorAll 然后循环处理或者直接数组遍历。新手常犯的错是明明放了五个一样的按钮结果只改了一个还以为是代码问题。再说执行时机坑。如果你在控制台里执行 document.querySelector(.lazy-image)页面还没渲染完就拿不到元素返回 null。这时候要么等页面加载完成再执行要么先监听 DOMContentLoaded 事件再执行。在控制台里最简单的方法就是等页面转完了再跑代码真的别怪代码有问题。然后说日志看不到坑。你新写了一个页面console.log 打了半天控制台里却什么都没有。先看控制台左上角的过滤器是不是把 Info 或 All 以外的级别选中了再看是不是勾选了“隐藏网络日志”最后确认代码里是不是有人重写了 console.log——别笑真有团队把 console 改成收集数据后直接干掉了调试的时候一脸懵。还有一个容易忽略的是控制台是有多个执行上下文Context的。在页面里打开的 iframe 有自己的 console扩展注入的脚本也可能出现在下拉菜单里。如果你选定了一个扩展的上下文再执行 document.querySelector搜到的是扩展页面的 DOM不是网页的。要记住默认选择 top 这层的上下文。6. 常见问题速查表为了方便你以后直接检索我把前面出现过的重点问题和解法整理成一张速查表问题可能原因操作/方向网页文字选不中、右键被禁页面脚本屏蔽了鼠标事件临时禁用 JS 后刷新或控制台执行 document.oncontextmenu nullF12 打开就卡住页面写了无限 debugger切到 Sources按 CtrlF8 禁用断点网站在控制台打印“不要粘贴代码”安全提示别当没看见不要执行来源不明的代码视频横过来/竖过来了视频源方向不对控制台执行 document.querySelector(video).style.rotate -90deg页面白屏JS 加载失败或 JS 渲染被禁用先看 Network 面板有没有红色资源再确认是否误禁用 JS控制台报 xxx is not defined变量未声明/拼写错误Sources 里定位对应行检查变量名和作用域控制台报 Cannot read properties of null选择器没找到元素等页面加载完再执行确认选择器写法正确图片加载不出来路径错、懒加载、服务器跨域Network 面板过滤 Img检查请求状态码网页打不开DNS 缓存坏、扩展冲突、系统时间错清 DNS 缓存、隐身窗口测扩展、同步系统时间禁用 JS 后按钮全没反应交互逻辑全由 JS 控制临时测试用恢复时在命令面板选择 Enable JavaScript这张表能不能帮到你取决于你对“原因”的理解深度。我的建议是先通读一遍正文把原理搞明白再回来用这张表当工具效果会好很多。最后再分享一点我个人经验这些年帮朋友和同事排查浏览器问题CtrlShiftP 然后输入 JavaScript 这个动作我做过不下几百次。它就像一把最朴素的瑞士军刀能解决弹窗、复制、脚本干扰、控制台被关这一整类问题。所以别小看这个最简单的开关配合控制台里几行代码很多“浏览器疑难杂症”其实几分钟就能解决。真要说有什么希望你能记住的就是四个字控制台不是黑客工具箱它是你的调试工作台。在自己看得懂、有需要的前提下科学使用它就是你网络冲浪和前端学习路上最好的伙伴。
RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进