1. 为什么我要专门写一篇禁用JS控制台的实战笔记前几天在技术群里碰到一个挺典型的提问有哥们儿在某视频网站看教程页面老是弹广告视频的播放画面还是倒着的他想在谷歌浏览器里把 JavaScript 禁了试试又想在控制台里手动转一下视频角度结果两件事都没搞定——设置里找不到入口控制台粘贴命令又直接报错。这两个需求一个叫“禁用 JavaScript”一个叫“控制台使用”看着是两条独立的技术线实际上在谷歌浏览器里是高度关联的禁用 JS 能解决弹窗、卡顿、广告干扰一类的问题控制台则是你手动接管页面行为的“最后手段”。把这套东西玩明白以后遇到“页面行为诡异”“脚本报错”“资源加载异常”之类的问题你会比多数人更快找到下手点。这篇文章主要面向三类人一是被网页弹窗、卡顿折磨的普通用户二是刚接触前端调试的开发新手三是需要做页面自动化验证的测试或者爬虫方向的爱好者。我会把禁用 JS 的几种方式、控制台的高频命令、报错排查思路以及常见问题比如驱动版本匹配、标签页恢复、网站禁用控制台怎么处理一次讲透。2. 谷歌浏览器禁用 JavaScript 的四种落地方式2.1 方式一站点级设置最稳妥谷歌浏览器本身没有那种“一键全局禁用 JS”的大开关老版本有后来为了性能和兼容性砍掉了但它在“网站设置”里提供了一个按站点控制的选项。操作路径是打开 Chrome 右上角三个点菜单进“设置”然后依次点击“隐私设置和安全性” - “网站设置” - “JavaScript”。进去之后你会看到两个列表一个是“允许发送 JavaScript”的站点名单一个是“不允许发送 JavaScript”的站点名单。默认情况下所有站点都在“允许”名单里你只需要点“不允许发送 JavaScript”右侧的“添加”把你要禁用 JS 的站点域名填进去就行。比如你想在某个新闻网站看文章时不受弹窗干扰就把那个域名加进去刷新后页面里由 JS 驱动的弹窗、浮层基本都会消失阅读体验会干净很多。这里有个细节值得注意这个设置是按顶级域名生效的你填了example.com但页面里有第三方子域名的脚本比如统计代码、广告SDK引用自static.example.net那些第三方脚本依然会执行。如果要把外部脚本也一起掐掉你得把那些外部域名也加进不允许名单操作上稍微麻烦一点但对普通用户来说只禁当前站点已经能解决 80% 的问题。2.2 方式二启动参数临时应急如果你只是临时想测一下“某个页面在完全没有 JS 的情况下长什么样”不想改网站设置也不想污染浏览环境可以给 Chrome 加一个启动参数--disable-javascript。做法分两步第一步先把所有 Chrome 窗口全部关掉注意后台托盘里还挂着的也要退干净第二步在桌面找到 Chrome 快捷方式鼠标右键进入“属性”在“目标”栏最后空一格加上--disable-javascript然后确认。之后再双击图标启动浏览器所有页面都会以禁用 JS 的状态运行。这个方式的优点是全局生效、见效快缺点是它会一直保持禁用状态测完了你得把参数去掉才能恢复正常。所以我一般不建议新手把参数写死在快捷方式里更适合的做法是用命令行临时启动一个实例。比如在 Windows 下按Win R输入chrome.exe --disable-javascript --user-data-dirC:\chrome-test用--user-data-dir指定一个全新的用户目录启动的是一个“干净的”浏览器实例跟日常使用的配置文件完全隔离测完直接关掉一点儿不打扰正常上网。这种思路在做自动化测试时尤其好用后面我会再提到。2.3 方式三扩展程序切换调试友好对于经常做前端调试的人来说站点设置和启动参数都显得太“重”了因为你要频繁地在“开启 JS”和“禁用 JS”之间切换。这时候更顺手的方式是用浏览器扩展来托管开关。目前比较主流的扩展叫 Quick JavaScript Switcher装上之后扩展栏会多出一个图标点一下就是禁用当前站点的 JS再点一下就恢复切换文案非常直观而且支持按当前标签页、按站点域名两种维度控制。这类扩展的底层原理其实还是在帮你改 Chrome 的内部设置只不过把操作封装成了一个按钮而已所以安全性上不用太担心,只要去官方商店下载基本没有问题。不过有一点我要提醒扩展本身也会消耗浏览器资源如果你只是偶尔用一次装扩展反而显得多余用 2.1 节的站点设置就够了。如果是做开发和测试需要频繁看“无 JS 环境下页面怎么降级”的效果那装扩展是值得的。2.4 禁用 JS 后的几个预期结果很多第一次禁用 JS 的人会有一个误区以为页面会完全白屏。实际上不同站点的表现差异非常大。纯静态内容站比如文档站、博客基本不受影响图片、标题、段落照常显示。依赖前端框架的站比如 Vue、React 单页应用大概率白屏因为页面骨架是 JS 动态渲染的。混合型站点内容能出来但交互会失灵比如轮播图不动了、点击按钮没反应、下拉菜单打不开。带有视频播放器的站点播放器是 JS 加载的禁用后可能只剩一个原生 video 标签或者干脆不显示。用一张表来总结可能会更清楚预期行为禁用 JS 后的表现弹窗、广告浮层明显减少页面加载速度多数场景提速尤其老设备表单提交、按钮事件失效懒加载图片可能不加载单页应用大概率白屏视频、音频播放器可能初始化失败我自己的习惯是日常浏览新闻类、文档类网站常驻禁用 JS需要登录、下单、支付时再临时恢复。这个习惯帮我躲掉了大量弹窗和性能损耗值得参照。3. 控制台从入门到熟练核心命令与调试习惯3.1 打开控制台并理解工作区谷歌浏览器的控制台Console打开方式有四种任选其一按F12打开开发者工具然后点顶部的 Console 标签。在页面上右键选“检查”进入后再切到 Console。按Ctrl Shift JMac 上是Cmd Option J直接跳到 Console 面板。从菜单进入三个点 - 更多工具 - 开发者工具。控制台正上方是一个可输入命令的输入区下面输出的内容是你的命令执行结果。它的本质是一个 JavaScript 运行时环境运行在页面当前上下文里。换句话说你在控制台里写的东西和页面自身脚本看到的世界是一样的——能访问同一个document能操作同一个 DOM 树也能读取页面里所有已加载的变量和函数。这正是控制台强大到有点“危险”的原因。新手最容易犯的错是在控制台里直接粘贴一段带引号的“命令”比如网上看到类似javascript:alert(1)这样的写法粘进去之后发现啥反应都没有或者提示Unexpected identifier。这是因为控制台里应该写的是纯 JS 语句不要带javascript:前缀那个前缀只在地址栏直接输入时才有用。3.2 控制台里最实用的命令集合控制台跟普通编辑器不一样它天生是给“临时验证”用的。我把平时用到频率最高的命令分成几类方便你对照着用。基础输出类console.log(这是普通日志); console.warn(这是警告); console.error(这是错误); console.table([{name:张三, age:18}, {name:李四, age:20}]); console.time(耗时测试); // 中间放一段要测耗时的代码 console.timeEnd(耗时测试);console.table是非常好用的工具处理数组和对象时它会在控制台里渲染出一张表格比console.log直接Object展开要直观得多。我在排查一堆 API 返回的分页数据时都是先console.table打出来再逐条对。变量查看与表达式计算let a 1; let b 2; a b; // 控制台会直接输出 3 typeof a; // number页面信息获取document.title; // 当前页面标题 location.href; // 当前地址 location.hostname; // 当前域名 navigator.userAgent; // User-Agent document.readyState; // 页面加载状态有一个快捷方式相当实用在控制台里输入document.querySelector(video)可以拿到页面里第一个视频元素配合document.querySelectorAll(video)能拿到所有视频列表。然后你就可以对这个视频做各种操作了。3.3 一段“视频旋转”脚本的逐行拆解热词里反复出现一段命令有相当多的人在搜内容大概是javascript: v document.queryselector(video); v.style.rotate -90deg; v.s...我先直接说结论这段命令不是完整的而且大小写写错了。正确的写法应该是const v document.querySelector(video); v.style.rotate -90deg;为什么很多人直接粘贴会报错核心原因是queryselector写成了小写。浏览器的 JS API 是区分大小写的正确名称是querySelector第一个字母 S 必须大写。如果你输入document.queryselector浏览器会告诉你document.queryselector is not a function。另外网上流传的版本经常带javascript:前缀这是从地址栏用法里抄来的放到控制台执行时也要去掉。javascript:在地址栏里表示一个伪协议控制台不认这个。再解释一下这两行代码在干什么。第一行document.querySelector(video)的作用是在当前页面里找第一个video标签把它存到变量v里。第二行v.style.rotate -90deg是给这个视频设一个 CSS 旋转属性让视频内容逆时针转 90 度。如果你在视频网站上看到画面方向不对比如手机竖屏录的视频在网页上横着放了就可以用这段代码把画面转过来。如果想旋转回来把-90deg改成0deg刷新页面就行。还有一个常见变体是把视频旋转 180 度那就改成180deg。3.4 控制台里的 DOM 选取与操作快捷键除了标准 API谷歌浏览器控制台还隐藏着几个只有它自己有的快捷符号新手不知道会绕很多弯路。$0代表你在 Elements 面板里当前选中的元素。你先切到 Elements用鼠标点一下页面里的任意节点再切回 Console 输入$0它就能直接返回这个节点并允许你操作它。调试样式和定位问题时配合舒服。$_代表上一次在控制台里执行的表达式结果。你输入1 2输出 3再输入$_ * 5输出就是 15。用来做渐进的数值调试很方便。$()等价于document.querySelector()的简写。不用打那么美元长的方法名。$$()等价于document.querySelectorAll()的简写返回的是一个数组可以直接用forEach遍历。做一个组合练习假设页面里有一堆隐藏的按钮你想把它们全部显示出来在控制台里写$$(button).forEach(btn btn.style.display block);这条语句的原理是$$(button)拿到页面所有按钮的数组forEach遍历每个按钮把它们的display属性改成block。控制台里这类“批量操作页面”的能力是普通用户平时根本接触不到但一旦会用就离不开的。关于 DOM 操作还有一个容易踩的坑document.querySelector只返回匹配的第一个元素如果页面上有多个视频标签你只取第一个可能不是你心里想的那个。所以遇到循环视频、多视频混排的页面时建议先用$$(video)输出所有视频列表看清楚有几个、哪个是目标再精准操作。4. 控制台实战调试报错、应对防调试与脚本片段4.1 从运行时报错到定位问题排查 JS 错误的通用思路热搜词里有“javascript 运行时报错”这几乎是每个前端人都逃不掉的问题。常见的运行时错误就那几种我列个速查表报错信息含义常见原因ReferenceError: xxx is not defined变量未定义拼错变量名、作用域不对、未引入对应脚本TypeError: xxx is not a function调用了不存在的方法API 拼写错误、对象为 null 或 undefinedSyntaxError: Unexpected token语法错误引号不匹配、括号缺失、中英文标点混用TypeError: Cannot read properties of undefined访问了 undefined 的属性接口返回结构跟预期不一致RangeError: Maximum call stack size exceeded栈溢出死循环递归排查这类问题的流程我的个人习惯是先在控制台看报错信息里给出的文件路径和行号比如app.js:12点击这个链接浏览器会跳转到 Sources 面板并自动定位到那一行代码然后看报错行上下文的变量通过console.log或者直接在控制台手动输出关键变量确认值是否正常。这里有个容易被忽略的点控制台里报的错可能是被try...catch捕获过的错误也可能是未经处理的“裸错误”。如果是前者控制台不一定会显示红色报错而是被吞掉或者在别的回调里输出。这时候可以勾选 Console 面板顶部的“Preserve log”保留日志选项并开启“Log XMLHttpRequests”来排查网络请求相关的异常。4.2 遇到“禁用控制台”页面时的调试思路热词里有一个高频问题“网站禁止控制台怎么打开”。这一般分两种情况。第一种情况是你在页面上按 F12 没反应。这通常是站点监听并拦截了快捷键事件甚至是利用了“开发者工具检测”的脚本检测到你打开了 DevTools 就把页面关掉或者频繁刷新。应对方法其实很简单,用命令行参数启动 Chrome用“远程调试”方式打开页面或者直接换一个干净的用户配置目录再看具体命令是chrome.exe --auto-open-devtools-for-tabs --user-data-dirC:\chrome-debug--auto-open-devtools-for-tabs这个参数会强制让新打开的每个标签页自动打开开发者工具绕过页面脚本对快捷键的拦截。第二种情况是页面会无限执行debugger语句让你一打开控制台就卡在断点处根本没法继续操作。这属于比较经典的防调试手段它不是真的“禁止控制台”而是用debugger语句在你打开 DevTools 时反复暂停执行。如果你有正当调试需求比如你是这个站点的前端开发想排查线上 bug可以在控制台弹出的断点处手动点掉 “Deactivate breakpoints”禁用断点按钮。这个按钮是一个带禁止符号的小图标点掉之后调试器就不会再停在这一类断点了。需要说明的是我只建议用这些方法调试你自己的页面、测试环境或者分析公开页面中合理的技术原理。不要用它去破解别人的商业系统、绕过会员逻辑或者爬取非公开数据那是另外的性质了。4.3 把常用脚本存成 Snippets控制台有一个“临时执行区”的短板你写的命令刷新页面就没了。如果有一段调试脚本你每天都要用比如批量提取页面链接、把视频旋转 90 度、给所有图片加边框那更聪明的做法是用 Snippets代码片段。操作路径打开开发者工具切到 Sources 面板左侧有“Snippets”标签点进去新建一个文件把你常用的脚本粘贴进去保存后右键选择“Run”。以后无论打开什么页面只要切到 Snippets 再运行这段脚本它都会立刻执行。它本质上就是一个小型书签脚本库但比书签脚本更好管理还能用 Chrome 自带的编辑和语法高亮。我个人的 Snippets 库里长期存着几个脚本一个用来批量导出当前页面的所有图片地址一个用来把页面里所有文字颜色临时改成红色方便截图标注还有一个是前面说的视频旋转。有了这套东西你就不需要每次去网上搜“控制台命令”再复制粘贴了。4.4 如何检查静态资源是否加载完成另一个热搜词是“javascript 检查静态资源是否加载完成”。这个问题在日常开发中很常见比如你发现页面样式偶尔生效偶尔不生效或者图片按钮时灵时不灵,很可能是静态资源加载超时或者失败了。在控制台里最直接的检查方式就是看 Network 面板勾选“Disable cache”停用缓存后刷新页面看各个请求的状态码是不是200是不是有红色的失败请求。如果想用 JS 代码来检查可以这样写const scripts Array.from(document.querySelectorAll(script[src])); const styles Array.from(document.querySelectorAll(link[relstylesheet])); Promise.all( [...scripts, ...styles].map(el { const href el.src || el.href; return fetch(href, { method: HEAD }).then(res res.ok).catch(() false); }) ).then(results { console.log(全部加载成功?, results.every(r r)); });这段代码的思路是把页面上所有带src的脚本和带href的样式表收集起来挨个发起HEAD请求判断是否返回ok。如果某个资源返回false那就是那里出了问题。注意跨域资源在控制台里执行fetch时可能被 CORS 阻挡遇到这种情况直接切到 Network 面板看请求状态会更准确。5. 控制台使用高频场景与问题排查实录5.1 页面打不开、卡顿、自动关闭的排查路径热搜词里有一串“谷歌浏览器打不开网页”“谷歌浏览器自动关闭”“优化谷歌浏览器卡顿”这类问题的背后很大概率和 JavaScript 的执行性能有关而不是浏览器本身坏了。页面卡顿优先看是否有脚本在无限循环或者反复触发重排。最原始的确认方式是打开控制台看 Console 面板里的报错频率和 Network 面板里的请求数量。如果刷新一次页面请求数量几十甚至上百那八成是某些轮询接口或者埋点脚本在频繁发请求。这时候可以用一个比较暴力的临时手段——按照前文的方法对当前站点禁用 JavaScript再刷新如果页面加载流畅了就说明是某个 JS 模块拖慢了整个页面。浏览器自动关闭的问题少见但很头疼。除了浏览器本身的崩溃 bug常见的诱因是扩展脚本与页面 JS 冲突导致渲染进程崩溃、显卡驱动异常导致硬件加速开启时偶尔崩溃。排查时可以新建一个--disable-extensions启动参数的 Chrome 实例看还会不会崩。如果不再崩溃那基本锁定是扩展问题挨个禁用扩展就能找出元凶。5.2 谷歌浏览器驱动下载与版本匹配“谷歌浏览器驱动下载”是自动化测试里绕不开的话题因为 Selenium、Puppeteer 这类工具需要通过 ChromeDriver 来驱动真实的浏览器执行任务。很多人卡在第一步驱动下载了也配到 Path 里了但启动脚本时报错session not created: This version of ChromeDriver only supports Chrome version XX。这个错误的本质是版本不匹配。Chrome 的主版本号必须和 ChromeDriver 的大版本号保持一致。举个例子如果你的谷歌浏览器是 120 版那 ChromeDriver 也必须下载 120 版对应的驱动文件不能随手拿一个最新的。查看浏览器版本的方法是地址栏输入chrome://version看“Google Chrome”这一行的数字。然后去 ChromeDriver 的官方下载页面挑选和你版本号一致或最接近的版本下载对应平台的压缩包。Windows 下解压得到一个chromedriver.exe把它放到一个固定目录再把该目录加到系统环境变量的 Path 里。设置完可以在 cmd 里执行chromedriver --version验证是否成功。还有一个自动化调试的实用性技巧如果你不想每次都手动启一个带参数的可执行文件可以在代码里给 ChromeOptions 传参数。以 Python 代码为例from selenium import webdriver from selenium.webdriver.chrome.options import Options options Options() options.add_argument(--disable-javascript) options.add_argument(--user-data-dirC:/selenium-profile) driver webdriver.Chrome(optionsoptions) driver.get(https://example.com)用--disable-javascript就是让自动化会话里的页面同样禁用 JS这在测试静态页面渲染、性能对比时非常有效。5.3 Chrome 多开一行命令脚本热搜词里有一条“谷歌浏览器多开txt转bat”原理其实很简单。正常情况下双击 Chrome 图标它会先去检查是不是已经有一个 Chrome 进程在运行如果有就默认复用到现有进程里新开的窗口只是那个进程的新标签页而已。但如果你用--user-data-dir指定一个全新的配置目录就可以把一个 Chrome 进程拆成多个相互隔离的实例。比如你想在同一台电脑上同时登录两个完全独立的账号体系可以建一个open-chrome.bat文件内容写echo off start C:\Program Files\Google\Chrome\Application\chrome.exe --user-data-dirC:\chrome-user-1 start C:\Program Files\Google\Chrome\Application\chrome.exe --user-data-dirC:\chrome-user-2保存后双击运行脚本会连续启动两个 Chrome 实例它们使用不同的用户数据目录互不干扰cookie、登录状态、扩展配置都是隔离的。在多账号运营、批量注册、同时测试不同环境时特别实用。注意C:\chrome-user-1这个目录是会自动创建的不用提前建好。第一个实例启动后可以最小化文件名编码如果是中文环境记得把 bat 文件保存为 ANSI 编码否则echo off可能显示乱码。5.4 误关标签页恢复与标签页记录查询这个功能很简单但很多人不知道一并说一下。如果你在浏览器里误关了一个标签页按Ctrl Shift T可以恢复最近关闭的那个标签页连续按可以依次恢复多个。这个热词里“tabs标签页 记录谷歌浏览器怎么恢复”指的就是这个。如果你想查更久以前的浏览记录而不是刚刚误关的页面可以用chrome://history打开历史记录页面按时间倒序列出你访问过的所有网址。控制台也可以在 History API 层面读取当前标签页的会话记录输入history.length看看当前标签页栈里有多少条记录输入history.back()就是让浏览器后退一步。这些命令对调试“跳转之后怎么回到上一个页面的逻辑”有一定帮助。5.5 控制台相关常见问题速查表最后整理一张速查表把我在实际使用中遇到的、以及热词里反复出现的控制台相关问题都放进去现象可能原因解决方法控制台粘贴命令报Unexpected identifier带了javascript:前缀去掉前缀只保留 JS 语句document.queryselector is not a functionAPI 大小写写错改成document.querySelector控制台里改了样式刷新就没效控制台变更不是持久化的用 Snippets 重新执行或改到开发者工具里覆盖一打开控制台页面就卡住页面执行 debugger 防调试点掉 Deactivate breakpoints 后断点调试控制台中文乱码页面编码和脚本编码不一致确认脚本保存为 UTF-8想禁用页面 JS 但找不到设置Chrome 版本差异用启动参数或扩展更容易Selenium 启动报 ChromeDriver 版本不匹配驱动版本和浏览器版本不一致按浏览器主版本号重新下载驱动误关的标签页找不回来快捷键没掌握Ctrl Shift T恢复这张表基本覆盖了大多数人的高频困扰实际排查时可以先对照现象直接看解决方法如果解决不了再往深一层查。6. 最后分享两个实用习惯禁用 JavaScript 和玩转控制台这两件事单独看都不算复杂但组合起来能解决大量浏览器层面的实际问题。我个人最常用的一个玩法是打开某个视频页面先切到控制台用$$(video)看有多少个视频标签再配合旋转脚本调整画面方向如果一个页面在禁用 JS 之后变得完全正常我基本能断定它有大量无效脚本在拖后腿。第二个习惯是把所有高频的调试脚本沉淀到 Snippets 里。你现在从网上复制粘贴过来的每一段“控制台命令”,都应该找个时间整理进自己的片段库。这样下次再遇到同类问题不用再翻历史记录也不用再被简写错误坑一次。控制台用久了你会发现它不只是调试工具更像一个能让你随时介入页面运行的“后门”——前提是你能理解你正在执行的每一行代码到底做了什么。 谷歌浏览器禁用JS与控制台调试实战笔记
1. 为什么我要专门写一篇禁用JS控制台的实战笔记前几天在技术群里碰到一个挺典型的提问有哥们儿在某视频网站看教程页面老是弹广告视频的播放画面还是倒着的他想在谷歌浏览器里把 JavaScript 禁了试试又想在控制台里手动转一下视频角度结果两件事都没搞定——设置里找不到入口控制台粘贴命令又直接报错。这两个需求一个叫“禁用 JavaScript”一个叫“控制台使用”看着是两条独立的技术线实际上在谷歌浏览器里是高度关联的禁用 JS 能解决弹窗、卡顿、广告干扰一类的问题控制台则是你手动接管页面行为的“最后手段”。把这套东西玩明白以后遇到“页面行为诡异”“脚本报错”“资源加载异常”之类的问题你会比多数人更快找到下手点。这篇文章主要面向三类人一是被网页弹窗、卡顿折磨的普通用户二是刚接触前端调试的开发新手三是需要做页面自动化验证的测试或者爬虫方向的爱好者。我会把禁用 JS 的几种方式、控制台的高频命令、报错排查思路以及常见问题比如驱动版本匹配、标签页恢复、网站禁用控制台怎么处理一次讲透。2. 谷歌浏览器禁用 JavaScript 的四种落地方式2.1 方式一站点级设置最稳妥谷歌浏览器本身没有那种“一键全局禁用 JS”的大开关老版本有后来为了性能和兼容性砍掉了但它在“网站设置”里提供了一个按站点控制的选项。操作路径是打开 Chrome 右上角三个点菜单进“设置”然后依次点击“隐私设置和安全性” - “网站设置” - “JavaScript”。进去之后你会看到两个列表一个是“允许发送 JavaScript”的站点名单一个是“不允许发送 JavaScript”的站点名单。默认情况下所有站点都在“允许”名单里你只需要点“不允许发送 JavaScript”右侧的“添加”把你要禁用 JS 的站点域名填进去就行。比如你想在某个新闻网站看文章时不受弹窗干扰就把那个域名加进去刷新后页面里由 JS 驱动的弹窗、浮层基本都会消失阅读体验会干净很多。这里有个细节值得注意这个设置是按顶级域名生效的你填了example.com但页面里有第三方子域名的脚本比如统计代码、广告SDK引用自static.example.net那些第三方脚本依然会执行。如果要把外部脚本也一起掐掉你得把那些外部域名也加进不允许名单操作上稍微麻烦一点但对普通用户来说只禁当前站点已经能解决 80% 的问题。2.2 方式二启动参数临时应急如果你只是临时想测一下“某个页面在完全没有 JS 的情况下长什么样”不想改网站设置也不想污染浏览环境可以给 Chrome 加一个启动参数--disable-javascript。做法分两步第一步先把所有 Chrome 窗口全部关掉注意后台托盘里还挂着的也要退干净第二步在桌面找到 Chrome 快捷方式鼠标右键进入“属性”在“目标”栏最后空一格加上--disable-javascript然后确认。之后再双击图标启动浏览器所有页面都会以禁用 JS 的状态运行。这个方式的优点是全局生效、见效快缺点是它会一直保持禁用状态测完了你得把参数去掉才能恢复正常。所以我一般不建议新手把参数写死在快捷方式里更适合的做法是用命令行临时启动一个实例。比如在 Windows 下按Win R输入chrome.exe --disable-javascript --user-data-dirC:\chrome-test用--user-data-dir指定一个全新的用户目录启动的是一个“干净的”浏览器实例跟日常使用的配置文件完全隔离测完直接关掉一点儿不打扰正常上网。这种思路在做自动化测试时尤其好用后面我会再提到。2.3 方式三扩展程序切换调试友好对于经常做前端调试的人来说站点设置和启动参数都显得太“重”了因为你要频繁地在“开启 JS”和“禁用 JS”之间切换。这时候更顺手的方式是用浏览器扩展来托管开关。目前比较主流的扩展叫 Quick JavaScript Switcher装上之后扩展栏会多出一个图标点一下就是禁用当前站点的 JS再点一下就恢复切换文案非常直观而且支持按当前标签页、按站点域名两种维度控制。这类扩展的底层原理其实还是在帮你改 Chrome 的内部设置只不过把操作封装成了一个按钮而已所以安全性上不用太担心,只要去官方商店下载基本没有问题。不过有一点我要提醒扩展本身也会消耗浏览器资源如果你只是偶尔用一次装扩展反而显得多余用 2.1 节的站点设置就够了。如果是做开发和测试需要频繁看“无 JS 环境下页面怎么降级”的效果那装扩展是值得的。2.4 禁用 JS 后的几个预期结果很多第一次禁用 JS 的人会有一个误区以为页面会完全白屏。实际上不同站点的表现差异非常大。纯静态内容站比如文档站、博客基本不受影响图片、标题、段落照常显示。依赖前端框架的站比如 Vue、React 单页应用大概率白屏因为页面骨架是 JS 动态渲染的。混合型站点内容能出来但交互会失灵比如轮播图不动了、点击按钮没反应、下拉菜单打不开。带有视频播放器的站点播放器是 JS 加载的禁用后可能只剩一个原生 video 标签或者干脆不显示。用一张表来总结可能会更清楚预期行为禁用 JS 后的表现弹窗、广告浮层明显减少页面加载速度多数场景提速尤其老设备表单提交、按钮事件失效懒加载图片可能不加载单页应用大概率白屏视频、音频播放器可能初始化失败我自己的习惯是日常浏览新闻类、文档类网站常驻禁用 JS需要登录、下单、支付时再临时恢复。这个习惯帮我躲掉了大量弹窗和性能损耗值得参照。3. 控制台从入门到熟练核心命令与调试习惯3.1 打开控制台并理解工作区谷歌浏览器的控制台Console打开方式有四种任选其一按F12打开开发者工具然后点顶部的 Console 标签。在页面上右键选“检查”进入后再切到 Console。按Ctrl Shift JMac 上是Cmd Option J直接跳到 Console 面板。从菜单进入三个点 - 更多工具 - 开发者工具。控制台正上方是一个可输入命令的输入区下面输出的内容是你的命令执行结果。它的本质是一个 JavaScript 运行时环境运行在页面当前上下文里。换句话说你在控制台里写的东西和页面自身脚本看到的世界是一样的——能访问同一个document能操作同一个 DOM 树也能读取页面里所有已加载的变量和函数。这正是控制台强大到有点“危险”的原因。新手最容易犯的错是在控制台里直接粘贴一段带引号的“命令”比如网上看到类似javascript:alert(1)这样的写法粘进去之后发现啥反应都没有或者提示Unexpected identifier。这是因为控制台里应该写的是纯 JS 语句不要带javascript:前缀那个前缀只在地址栏直接输入时才有用。3.2 控制台里最实用的命令集合控制台跟普通编辑器不一样它天生是给“临时验证”用的。我把平时用到频率最高的命令分成几类方便你对照着用。基础输出类console.log(这是普通日志); console.warn(这是警告); console.error(这是错误); console.table([{name:张三, age:18}, {name:李四, age:20}]); console.time(耗时测试); // 中间放一段要测耗时的代码 console.timeEnd(耗时测试);console.table是非常好用的工具处理数组和对象时它会在控制台里渲染出一张表格比console.log直接Object展开要直观得多。我在排查一堆 API 返回的分页数据时都是先console.table打出来再逐条对。变量查看与表达式计算let a 1; let b 2; a b; // 控制台会直接输出 3 typeof a; // number页面信息获取document.title; // 当前页面标题 location.href; // 当前地址 location.hostname; // 当前域名 navigator.userAgent; // User-Agent document.readyState; // 页面加载状态有一个快捷方式相当实用在控制台里输入document.querySelector(video)可以拿到页面里第一个视频元素配合document.querySelectorAll(video)能拿到所有视频列表。然后你就可以对这个视频做各种操作了。3.3 一段“视频旋转”脚本的逐行拆解热词里反复出现一段命令有相当多的人在搜内容大概是javascript: v document.queryselector(video); v.style.rotate -90deg; v.s...我先直接说结论这段命令不是完整的而且大小写写错了。正确的写法应该是const v document.querySelector(video); v.style.rotate -90deg;为什么很多人直接粘贴会报错核心原因是queryselector写成了小写。浏览器的 JS API 是区分大小写的正确名称是querySelector第一个字母 S 必须大写。如果你输入document.queryselector浏览器会告诉你document.queryselector is not a function。另外网上流传的版本经常带javascript:前缀这是从地址栏用法里抄来的放到控制台执行时也要去掉。javascript:在地址栏里表示一个伪协议控制台不认这个。再解释一下这两行代码在干什么。第一行document.querySelector(video)的作用是在当前页面里找第一个video标签把它存到变量v里。第二行v.style.rotate -90deg是给这个视频设一个 CSS 旋转属性让视频内容逆时针转 90 度。如果你在视频网站上看到画面方向不对比如手机竖屏录的视频在网页上横着放了就可以用这段代码把画面转过来。如果想旋转回来把-90deg改成0deg刷新页面就行。还有一个常见变体是把视频旋转 180 度那就改成180deg。3.4 控制台里的 DOM 选取与操作快捷键除了标准 API谷歌浏览器控制台还隐藏着几个只有它自己有的快捷符号新手不知道会绕很多弯路。$0代表你在 Elements 面板里当前选中的元素。你先切到 Elements用鼠标点一下页面里的任意节点再切回 Console 输入$0它就能直接返回这个节点并允许你操作它。调试样式和定位问题时配合舒服。$_代表上一次在控制台里执行的表达式结果。你输入1 2输出 3再输入$_ * 5输出就是 15。用来做渐进的数值调试很方便。$()等价于document.querySelector()的简写。不用打那么美元长的方法名。$$()等价于document.querySelectorAll()的简写返回的是一个数组可以直接用forEach遍历。做一个组合练习假设页面里有一堆隐藏的按钮你想把它们全部显示出来在控制台里写$$(button).forEach(btn btn.style.display block);这条语句的原理是$$(button)拿到页面所有按钮的数组forEach遍历每个按钮把它们的display属性改成block。控制台里这类“批量操作页面”的能力是普通用户平时根本接触不到但一旦会用就离不开的。关于 DOM 操作还有一个容易踩的坑document.querySelector只返回匹配的第一个元素如果页面上有多个视频标签你只取第一个可能不是你心里想的那个。所以遇到循环视频、多视频混排的页面时建议先用$$(video)输出所有视频列表看清楚有几个、哪个是目标再精准操作。4. 控制台实战调试报错、应对防调试与脚本片段4.1 从运行时报错到定位问题排查 JS 错误的通用思路热搜词里有“javascript 运行时报错”这几乎是每个前端人都逃不掉的问题。常见的运行时错误就那几种我列个速查表报错信息含义常见原因ReferenceError: xxx is not defined变量未定义拼错变量名、作用域不对、未引入对应脚本TypeError: xxx is not a function调用了不存在的方法API 拼写错误、对象为 null 或 undefinedSyntaxError: Unexpected token语法错误引号不匹配、括号缺失、中英文标点混用TypeError: Cannot read properties of undefined访问了 undefined 的属性接口返回结构跟预期不一致RangeError: Maximum call stack size exceeded栈溢出死循环递归排查这类问题的流程我的个人习惯是先在控制台看报错信息里给出的文件路径和行号比如app.js:12点击这个链接浏览器会跳转到 Sources 面板并自动定位到那一行代码然后看报错行上下文的变量通过console.log或者直接在控制台手动输出关键变量确认值是否正常。这里有个容易被忽略的点控制台里报的错可能是被try...catch捕获过的错误也可能是未经处理的“裸错误”。如果是前者控制台不一定会显示红色报错而是被吞掉或者在别的回调里输出。这时候可以勾选 Console 面板顶部的“Preserve log”保留日志选项并开启“Log XMLHttpRequests”来排查网络请求相关的异常。4.2 遇到“禁用控制台”页面时的调试思路热词里有一个高频问题“网站禁止控制台怎么打开”。这一般分两种情况。第一种情况是你在页面上按 F12 没反应。这通常是站点监听并拦截了快捷键事件甚至是利用了“开发者工具检测”的脚本检测到你打开了 DevTools 就把页面关掉或者频繁刷新。应对方法其实很简单,用命令行参数启动 Chrome用“远程调试”方式打开页面或者直接换一个干净的用户配置目录再看具体命令是chrome.exe --auto-open-devtools-for-tabs --user-data-dirC:\chrome-debug--auto-open-devtools-for-tabs这个参数会强制让新打开的每个标签页自动打开开发者工具绕过页面脚本对快捷键的拦截。第二种情况是页面会无限执行debugger语句让你一打开控制台就卡在断点处根本没法继续操作。这属于比较经典的防调试手段它不是真的“禁止控制台”而是用debugger语句在你打开 DevTools 时反复暂停执行。如果你有正当调试需求比如你是这个站点的前端开发想排查线上 bug可以在控制台弹出的断点处手动点掉 “Deactivate breakpoints”禁用断点按钮。这个按钮是一个带禁止符号的小图标点掉之后调试器就不会再停在这一类断点了。需要说明的是我只建议用这些方法调试你自己的页面、测试环境或者分析公开页面中合理的技术原理。不要用它去破解别人的商业系统、绕过会员逻辑或者爬取非公开数据那是另外的性质了。4.3 把常用脚本存成 Snippets控制台有一个“临时执行区”的短板你写的命令刷新页面就没了。如果有一段调试脚本你每天都要用比如批量提取页面链接、把视频旋转 90 度、给所有图片加边框那更聪明的做法是用 Snippets代码片段。操作路径打开开发者工具切到 Sources 面板左侧有“Snippets”标签点进去新建一个文件把你常用的脚本粘贴进去保存后右键选择“Run”。以后无论打开什么页面只要切到 Snippets 再运行这段脚本它都会立刻执行。它本质上就是一个小型书签脚本库但比书签脚本更好管理还能用 Chrome 自带的编辑和语法高亮。我个人的 Snippets 库里长期存着几个脚本一个用来批量导出当前页面的所有图片地址一个用来把页面里所有文字颜色临时改成红色方便截图标注还有一个是前面说的视频旋转。有了这套东西你就不需要每次去网上搜“控制台命令”再复制粘贴了。4.4 如何检查静态资源是否加载完成另一个热搜词是“javascript 检查静态资源是否加载完成”。这个问题在日常开发中很常见比如你发现页面样式偶尔生效偶尔不生效或者图片按钮时灵时不灵,很可能是静态资源加载超时或者失败了。在控制台里最直接的检查方式就是看 Network 面板勾选“Disable cache”停用缓存后刷新页面看各个请求的状态码是不是200是不是有红色的失败请求。如果想用 JS 代码来检查可以这样写const scripts Array.from(document.querySelectorAll(script[src])); const styles Array.from(document.querySelectorAll(link[relstylesheet])); Promise.all( [...scripts, ...styles].map(el { const href el.src || el.href; return fetch(href, { method: HEAD }).then(res res.ok).catch(() false); }) ).then(results { console.log(全部加载成功?, results.every(r r)); });这段代码的思路是把页面上所有带src的脚本和带href的样式表收集起来挨个发起HEAD请求判断是否返回ok。如果某个资源返回false那就是那里出了问题。注意跨域资源在控制台里执行fetch时可能被 CORS 阻挡遇到这种情况直接切到 Network 面板看请求状态会更准确。5. 控制台使用高频场景与问题排查实录5.1 页面打不开、卡顿、自动关闭的排查路径热搜词里有一串“谷歌浏览器打不开网页”“谷歌浏览器自动关闭”“优化谷歌浏览器卡顿”这类问题的背后很大概率和 JavaScript 的执行性能有关而不是浏览器本身坏了。页面卡顿优先看是否有脚本在无限循环或者反复触发重排。最原始的确认方式是打开控制台看 Console 面板里的报错频率和 Network 面板里的请求数量。如果刷新一次页面请求数量几十甚至上百那八成是某些轮询接口或者埋点脚本在频繁发请求。这时候可以用一个比较暴力的临时手段——按照前文的方法对当前站点禁用 JavaScript再刷新如果页面加载流畅了就说明是某个 JS 模块拖慢了整个页面。浏览器自动关闭的问题少见但很头疼。除了浏览器本身的崩溃 bug常见的诱因是扩展脚本与页面 JS 冲突导致渲染进程崩溃、显卡驱动异常导致硬件加速开启时偶尔崩溃。排查时可以新建一个--disable-extensions启动参数的 Chrome 实例看还会不会崩。如果不再崩溃那基本锁定是扩展问题挨个禁用扩展就能找出元凶。5.2 谷歌浏览器驱动下载与版本匹配“谷歌浏览器驱动下载”是自动化测试里绕不开的话题因为 Selenium、Puppeteer 这类工具需要通过 ChromeDriver 来驱动真实的浏览器执行任务。很多人卡在第一步驱动下载了也配到 Path 里了但启动脚本时报错session not created: This version of ChromeDriver only supports Chrome version XX。这个错误的本质是版本不匹配。Chrome 的主版本号必须和 ChromeDriver 的大版本号保持一致。举个例子如果你的谷歌浏览器是 120 版那 ChromeDriver 也必须下载 120 版对应的驱动文件不能随手拿一个最新的。查看浏览器版本的方法是地址栏输入chrome://version看“Google Chrome”这一行的数字。然后去 ChromeDriver 的官方下载页面挑选和你版本号一致或最接近的版本下载对应平台的压缩包。Windows 下解压得到一个chromedriver.exe把它放到一个固定目录再把该目录加到系统环境变量的 Path 里。设置完可以在 cmd 里执行chromedriver --version验证是否成功。还有一个自动化调试的实用性技巧如果你不想每次都手动启一个带参数的可执行文件可以在代码里给 ChromeOptions 传参数。以 Python 代码为例from selenium import webdriver from selenium.webdriver.chrome.options import Options options Options() options.add_argument(--disable-javascript) options.add_argument(--user-data-dirC:/selenium-profile) driver webdriver.Chrome(optionsoptions) driver.get(https://example.com)用--disable-javascript就是让自动化会话里的页面同样禁用 JS这在测试静态页面渲染、性能对比时非常有效。5.3 Chrome 多开一行命令脚本热搜词里有一条“谷歌浏览器多开txt转bat”原理其实很简单。正常情况下双击 Chrome 图标它会先去检查是不是已经有一个 Chrome 进程在运行如果有就默认复用到现有进程里新开的窗口只是那个进程的新标签页而已。但如果你用--user-data-dir指定一个全新的配置目录就可以把一个 Chrome 进程拆成多个相互隔离的实例。比如你想在同一台电脑上同时登录两个完全独立的账号体系可以建一个open-chrome.bat文件内容写echo off start C:\Program Files\Google\Chrome\Application\chrome.exe --user-data-dirC:\chrome-user-1 start C:\Program Files\Google\Chrome\Application\chrome.exe --user-data-dirC:\chrome-user-2保存后双击运行脚本会连续启动两个 Chrome 实例它们使用不同的用户数据目录互不干扰cookie、登录状态、扩展配置都是隔离的。在多账号运营、批量注册、同时测试不同环境时特别实用。注意C:\chrome-user-1这个目录是会自动创建的不用提前建好。第一个实例启动后可以最小化文件名编码如果是中文环境记得把 bat 文件保存为 ANSI 编码否则echo off可能显示乱码。5.4 误关标签页恢复与标签页记录查询这个功能很简单但很多人不知道一并说一下。如果你在浏览器里误关了一个标签页按Ctrl Shift T可以恢复最近关闭的那个标签页连续按可以依次恢复多个。这个热词里“tabs标签页 记录谷歌浏览器怎么恢复”指的就是这个。如果你想查更久以前的浏览记录而不是刚刚误关的页面可以用chrome://history打开历史记录页面按时间倒序列出你访问过的所有网址。控制台也可以在 History API 层面读取当前标签页的会话记录输入history.length看看当前标签页栈里有多少条记录输入history.back()就是让浏览器后退一步。这些命令对调试“跳转之后怎么回到上一个页面的逻辑”有一定帮助。5.5 控制台相关常见问题速查表最后整理一张速查表把我在实际使用中遇到的、以及热词里反复出现的控制台相关问题都放进去现象可能原因解决方法控制台粘贴命令报Unexpected identifier带了javascript:前缀去掉前缀只保留 JS 语句document.queryselector is not a functionAPI 大小写写错改成document.querySelector控制台里改了样式刷新就没效控制台变更不是持久化的用 Snippets 重新执行或改到开发者工具里覆盖一打开控制台页面就卡住页面执行 debugger 防调试点掉 Deactivate breakpoints 后断点调试控制台中文乱码页面编码和脚本编码不一致确认脚本保存为 UTF-8想禁用页面 JS 但找不到设置Chrome 版本差异用启动参数或扩展更容易Selenium 启动报 ChromeDriver 版本不匹配驱动版本和浏览器版本不一致按浏览器主版本号重新下载驱动误关的标签页找不回来快捷键没掌握Ctrl Shift T恢复这张表基本覆盖了大多数人的高频困扰实际排查时可以先对照现象直接看解决方法如果解决不了再往深一层查。6. 最后分享两个实用习惯禁用 JavaScript 和玩转控制台这两件事单独看都不算复杂但组合起来能解决大量浏览器层面的实际问题。我个人最常用的一个玩法是打开某个视频页面先切到控制台用$$(video)看有多少个视频标签再配合旋转脚本调整画面方向如果一个页面在禁用 JS 之后变得完全正常我基本能断定它有大量无效脚本在拖后腿。第二个习惯是把所有高频的调试脚本沉淀到 Snippets 里。你现在从网上复制粘贴过来的每一段“控制台命令”,都应该找个时间整理进自己的片段库。这样下次再遇到同类问题不用再翻历史记录也不用再被简写错误坑一次。控制台用久了你会发现它不只是调试工具更像一个能让你随时介入页面运行的“后门”——前提是你能理解你正在执行的每一行代码到底做了什么。