如何利用米侠浏览器内置的Console控制台调试JS代码?

千丽大大_5919

千丽大大_5919

2026-07-16

563人浏览

原创

在米侠浏览器中调试js最快速方式是使用内置console控制台:按f12或右键“检查”进入console,确保网页加载完成后再操作;支持单行表达式执行、debugger断点、sources面板打点、事件监听器查看及变量监控与异常捕获。

如何利用米侠浏览器内置的console控制台调试js代码?

当你在米侠浏览器中运行网页时发现按钮点击没反应、表单提交后页面空白或控制台报错但找不到源头,直接用内置Console控制台调试JS代码是最快速的定位方式。

打开Console控制台

按 F12 键,或右键网页任意位置 → 选择「检查」→ 切换到「Console」标签页。这一步必须在目标网页已加载完成后再执行,否则可能看不到当前页面绑定的事件监听器和全局变量。

如果按F12没反应,说明当前网页启用了开发者工具禁用策略,需关闭网页的 「禁止调试」meta标签 或换用本地HTML文件测试。

执行单行JS代码验证逻辑

在Console输入框里直接写 JS 表达式,比如 document.title → 回车,立刻返回当前页面标题。

这一步操作起来很简单,直接把代码敲进去回车就行。但注意:不能在这里声明函数并立即调用——比如写 function test(){alert(1)};test() 会报错,因为分号分隔后第二句找不到函数定义;必须写成一行:function test(){alert(1)};test() 或改用箭头函数:((_)=>{alert(1)})()。

设置断点动态调试

方法一:在Console中输入 debugger 并回车,刷新页面后执行流会在该语句处暂停。

方法二:切换到「Sources」面板 → 左侧文件树找到目标JS文件 → 点击行号左侧灰色区域打上断点 → 刷新页面触发中断。

page-agent 浏览器控制(CDP)
page-agent 浏览器控制(CDP)

使用 page-agent CLI(CDP)控制浏览器;CLI只能通过 GitHub Release 的 .tgz 安装,npm 官方包暂未发布。

下载

方法三:在Console中执行 getEventListeners(document.querySelector('button')) 查看按钮绑定的所有事件监听器,再针对性地在对应回调函数第一行插入 debugger。

注意:如果JS是压缩过的,Sources面板会显示乱码,此时必须先点击右下角 `{}` 格式化按钮,否则断点无法命中真实逻辑行。

监控变量变化与异常捕获

第一步:输入 monitorEvents(document.body, 'click') → 回车,此后所有body上的点击事件都会在Console中打印出完整event对象。

第二步:输入 onerror = function(e){console.error('全局错误:', e.error || e);} → 回车,捕获未被try-catch包裹的运行时错误。

第三步:输入 var target = document.getElementById('myInput'); Object.defineProperty(target, 'value', {set: v => {console.log('value被设为:', v);}}) → 监听input值被JS脚本修改的瞬间。

这三步必须按顺序执行,中间不能刷新页面,否则监听器失效。其中第三步依赖目标元素已存在DOM中,【若元素尚未渲染,会报Cannot define property on null】。

相关专题

更多
js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

4316

8

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.07.28

1335

5

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1738

5

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

2023.08.17

9883

11

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

960

4

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

2664

5

Js中concat和push的区别
Js中concat和push的区别

Js中concat和push的区别:1、concat用于将两个或多个数组合并成一个新数组,并返回这个新数组,而push用于向数组的末尾添加一个或多个元素,并返回修改后的数组的新长度;2、concat不会修改原始数组,是创建新的数组,而push会修改原数组,将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.14

1549

5

js截取字符串的方法介绍
js截取字符串的方法介绍

JavaScript字符串截取方法,包括substring、slice、substr、charAt和split方法。这些方法可以根据具体需求,灵活地截取字符串的不同部分。在实际开发中,根据具体情况选择合适的方法进行字符串截取,能够提高代码的效率和可读性 。

2023.09.21

4589

3

js生成随机数方法
js生成随机数方法

JavaScript生成随机数的方法,包括使用Math.random()方法生成指定范围内的随机整数、生成随机字符串和生成随机颜色。根据具体需求,可以选择适合的方法来生成随机数,以实现各种功能 。

2023.09.25

2635

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Qt Creator 调试文档
Qt Creator 调试文档

共0课时 | 0人学习

3分钟内将Xdebug安装到PHP
3分钟内将Xdebug安装到PHP

共1课时 | 167人学习