Chrome+JS实现断点调试

php中世界最好的语言

发布时间：2018-04-18 10:56:40

2011人浏览过

来源于php中文网

原创

这次给大家带来chrome+js实现断点调试，chrome+js实现断点调试的注意事项有哪些，下面就是实战案例，一起来看一下。

技巧二：快速跳转到某个断点的位置

右侧的Breakpoints会汇总你在JS文件所有打过的断点，点击跟checkbox同一行的会暂时取消这个断点，若是点击checkbox下一行的会直接跳转到该断点的位置

技巧三：查看断点内部的作用范围【很实用】

右侧的scope可以看到相当多实用的信息，比如this的指向，是否有值，断点是对象还是其他等。

技巧4：监听事件断点

右侧的Event Listener Breakpoints可以选择性的监听某类行为事件，比如键盘输入，拖拉等。。勾选前面的checkbox就可以生效，当你触发改行为的时候就会跳转到触发的JS

技巧5：DOM及 XHR监听跳转

DOM Breakpoints : 是你Elements页，感觉要监听某段dom的可能有一些行为，但是又不具体知道确切位置就可以用了

XHR Breakpoints：向服务器请求的，ajax的核心要点

默认勾选了，所有XHR行为，可选项是判断URL。。。我用的不多

技巧6：单步执行、单步进入、强制进入、单步退出

这个东东是调试中必不可少的，其实用过firebug的小伙伴，对这个就有一个清晰的认识你。基本一样；

功能名词依次，不懂的可以看看我firebug那个系列的

Pause script excution 【单步执行，在断点处暂停，等待调试–不是直译】：暂停后这个按钮会变成 Resume script excution 【继续执行】，快捷键【F8 或者 Ctrl + 】
Step over next function call【单步跳过】：会跳到下一个断点，快捷键【F10 或者 Ctrl + `】
Step into next function call【单步进入】：会进入函数内部调试，快捷键【F11 或者 Ctrl + ;】
Step out of current function 【单步跳出】: 会跳出当前这个断点的函数，快捷键【Shift + F11 或者 Ctrl + Shift + ;】

后面的就是chrome的特色功能

Deactivate breakpoints : 使所有断点临时失效，快捷键【Ctrl + F8】
Don't Pause on exceptions: 不要在表达式处暂停，还有一个可选项【Pause On Caught Exceptions– 若抛出异常则需要暂停在那里】

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

响应式实验室宣传网站模板

响应式实验室宣传网站模板是一款适合提供病理扫描测试、化学研究、自然疗法测试、诊断测试、生物化学测试、基因测试等服务的实验室宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

相关标签:

javascript ajax chrome vue.js firebug checkbox Event JS function 对象事件 dom this

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：vue.js移动端实现上拉加载下拉刷新下一篇：replace函数使用详解

作者最新文章

最新php程序员工具箱 v1.0版本介绍

2018-07-11 12:56

使用jQuery替换节点元素（附代码）

2018-06-15 15:22

Angular CLI+Angular 5实战项目演示

2018-06-15 15:34

怎样对JS原型与原型链进行使用

2018-06-15 15:37

如何利用jquery做出文件上传加载

2018-06-15 15:39

如何在项目中使用jQuery内each方法

2018-06-15 15:40

怎样操作JS字符串与特殊字符

2018-06-15 15:42

怎样在项目中使用js绑定DOM事件

2018-06-15 15:46

怎样使用js解析数据库（附代码）

2018-06-15 15:49

vue.js路由失效如何处理

2018-06-15 15:55

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI编程开发 AI聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI编程开发 AI文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI编程开发 AI文本写作

智谱清言 - 免费全能的AI助手

AI编程开发 Agent智能体

相关专题

ajax教程

php中文网为大家带来ajax教程合集，Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。

166

2023.06.14

ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容，供大家免费下载体验。

170

2023.08.31

ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法：1、设置统一的编码方式；2、服务器端编码；3、客户端解码；4、设置HTTP响应头；5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

124

2023.11.15

ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

257

2024.09.24

chrome什么意思

chrome是浏览器的意思，由Google开发的网络浏览器，它在2008年首次发布，并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容，供大家免费下载体验。

1056

2023.08.11

chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

837

2023.11.06

vue.js为什么报错

vue.js报错的原因：1、语法错误；2、组件使用不当；3、数据绑定问题；4、生命周期钩子使用不当；5、插件或依赖问题；6、路由配置错误；7、异步操作处理不当等等。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

128

2024.03.11

vue.js插槽有哪些用

vue.js插槽的作用：1、提高组件的可重用性；2、实现组件的灵活布局；3、实现组件间的数据传递和交互；4、促进组件的解耦和模块化。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

186

2024.03.11

C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开，系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例，帮助开发者掌握构建高可用微服务系统的关键技术，提高系统的可扩展性与维护效率。

2026.03.11

热门下载

网站特效

网站源码

网站素材

前端模板