debugのChrome篇

简介: debugのChrome篇

我来到这个世界为的是看太阳和蔚蓝色的田野。——巴尔蒙特

chrome中如何debug?我们可以打开chrome的控制台

找到我们的文件

然后在想要调试的地方打断点

然后执行到此处的时候就会触发调试

我们可以点击右侧的Step into next function call来执行下一步函数调用

可以点击Resume script execution放行到下个断点

然后Step over next function call则可以执行步过,执行到当前函数结尾

Step out of current function步出,则可以跳出我们当前执行的函数

Step和我们第一个Step into next function call差不多,都是执行下一步

Activate breakpoints则是禁用断点

最后一个Pause on exceptions则是在所有异常发生时暂停程序,开始调试

我们也可以直接在代码里右键,点击执行到当前代码

Call Stack区域可以查看我们当前函数以及它的调用者 甚至 调用者的调用者…

image-20201201210009626.png

下方的Scope区域可以观测我们的参数,在Breakpoints区域则是我们设置的断点

image-20201201203824755.png

在我们设置的断点右键,可以看到也有很多选项

XHR/fectch Breakpoints右侧的+则可以在指定请求设置断点

我们还可以设置为任意请求

image-20201201210958371.png

DOM Breakpoints则是元素断点

image-20201201210958371.png

比如我这里给input元素设置了个当标签的属性发生修改时停止我们的程序

顺带一提,我们还可以把指定js放入“黑盒”

放入“黑盒”的代码,我们执行的时候会跳过这些js,比如一些第三方框架源码我们就可以放入“黑盒”。当然我们可以点击上方的按钮移出“黑盒”

右边的Configure按钮则可以进行一些配置,甚至能看到我们DEBUG的快捷键

image-20201201211926834.png

下面则是我们的全局监听断点,Global能看到我们设置的触发调试监听事件

Event Listener Breakpoints中我们可以任意设置触发调试的监听事件

大概就是这里啦~现在大家能在以后写前端的时候除了console.log()还能多一种选择

相关文章
|
16天前
|
存储 弹性计算 人工智能
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
2025年9月24日,阿里云弹性计算团队多位产品、技术专家及服务器团队技术专家共同在【2025云栖大会】现场带来了《通用计算产品发布与行业实践》的专场论坛,本论坛聚焦弹性计算多款通用算力产品发布。同时,ECS云服务器安全能力、资源售卖模式、计算AI助手等用户体验关键环节也宣布升级,让用云更简单、更智能。海尔三翼鸟云服务负责人刘建锋先生作为特邀嘉宾,莅临现场分享了关于阿里云ECS g9i推动AIoT平台的场景落地实践。
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
|
8天前
|
云安全 人工智能 安全
Dify平台集成阿里云AI安全护栏,构建AI Runtime安全防线
阿里云 AI 安全护栏加入Dify平台,打造可信赖的 AI
|
11天前
|
人工智能 运维 Java
Spring AI Alibaba Admin 开源!以数据为中心的 Agent 开发平台
Spring AI Alibaba Admin 正式发布!一站式实现 Prompt 管理、动态热更新、评测集构建、自动化评估与全链路可观测,助力企业高效构建可信赖的 AI Agent 应用。开源共建,现已上线!
1022 34
|
10天前
|
机器学习/深度学习 人工智能 搜索推荐
万字长文深度解析最新Deep Research技术:前沿架构、核心技术与未来展望
近期发生了什么自 2025 年 2 月 OpenAI 正式发布Deep Research以来,深度研究/深度搜索(Deep Research / Deep Search)正在成为信息检索与知识工作的全新范式:系统以多步推理驱动大规模联网检索、跨源证据。
770 54
|
8天前
|
文字识别 测试技术 开发者
Qwen3-VL新成员 2B、32B来啦!更适合开发者体质
Qwen3-VL家族重磅推出2B与32B双版本,轻量高效与超强推理兼备,一模型通吃多模态与纯文本任务!
661 11