Chrome控制台快速查找调试JavaScript运行代码

个人觉得 Chrome 是目前最好用的浏览器,IE 简直就是搅屎棍。不知道大家在看别人写的网页时,怎么找对应的 js 动作的?是不是根据 id 或者 name 等标识,在 js 文件中挨个搜索?这种办法是最基础的,最原始的。不过对于大型网站,引用的 js 文件一大片的那种,不知道各位还有没有心情查找。Chrome 内核给我们提供了非常强大的开发人员工具,使用它,我们可以提升很高的效率,下面就跟我一起学习下 Chrome 控制台快速查找调试 JavaScript 运行代码吧!以本站为例,点击用户中心修改用户的昵称,我们可以这样做。

Chrome 控制台必须使用 Chrome 内核才有,目前市面上,除了 IE 之外几乎都有,按 F12 即可开启。选择 Chrome 控制台中 sources 资源选项卡,打开 debugger 窗口。选择 event listener breakpoints 下的 Mouse 下的 click 事件,如下图所示:
Chrome控制台快速查找调试JavaScript运行代码-云模板点击按钮后,会执行一步 JavaScript,并且暂停,出现 js 调试效果。这个时候如果跳到 jquery 等第三方封装库中,我们可以使用 blackbox script 功能,将其加入黑箱子中,这样就不会暂停到第三方类库中。
Chrome控制台快速查找调试JavaScript运行代码-云模板如果第一步暂停效果不是你要的代码,你可以点击继续调试按钮,进入下一步 js 执行位置,在资源窗口可以看到对应的代码,如下图:
Chrome控制台快速查找调试JavaScript运行代码-云模板仅仅只需要点击几下鼠标,就能快速找到网页中执行的 js 代码所在文件及行号,是不是非常方便呢?

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/90680

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买