Chrome操作指南——入门篇(八)breakpoint

简介: Chrome操作指南——入门篇(八)breakpoint

前言


平常我们在前端开发调试的过程中,用的最常用的一种手段就是通过console.log(...)来打印日志,根据日志来分析问题。其实还有一种手段就是breakpoint,它可以在你想要的观察地方,阻塞你的代码,观察当前的运行情况,在开发调试中不失为一种好的办法,尤其是在生产环境下,很是好用。


breakpoint


比如有如下一段代码:


Array.from(Array(10))
  .map(Math.random)
  .forEach((item) => {
   let num = item * 10
  });
复制代码


你想在每次循环的时候让代码停下来,观察它的状态:


image.png


你就可以在相应的地方鼠标左键单击一下,添加断点,这样每次循环的时候就会停下来。


edit brakpoint


当然,他可能循环的次数很多,可能几十次,上百次,你不想每次都停下来观察它,你就可以 右键 -> edit breakpoint,输入表达式来添加条件断点,会在结果为真值的时候停下来。


image.png


可以看到我们添加的一个当num大于5时的断点,他在每次num大于5的时候,都停了下来。


breakpoint和console.log(...)


既然我们可以在条件断点中添加表达式,那同样的是不是我们也可以添加console.log(...),


image.png


我们分别在第四行和第五行,添加了两个添加断点。


image.png


在console中我们可以看到,它如我们预想中的打印了出来。


既然可以添加console.log(),那我们何不直接在source面板里面直接添加呢。完全避免了项目中一堆log信息的问题。而且当你不想要的时候,在breakpoint取消相应的选项就行,或者右键全部移除。

相关文章
|
3月前
|
Web App开发 监控 前端开发
重磅! Chrome开发者工具入门
重磅! Chrome开发者工具入门
|
4月前
|
Web App开发 前端开发 JavaScript
Chrome插件实现问题之用户在浏览器中输入URL后,浏览器进程会进行什么操作
Chrome插件实现问题之用户在浏览器中输入URL后,浏览器进程会进行什么操作
|
6月前
|
Web App开发 搜索推荐 前端开发
【热门话题】Chrome 插件研发详解:从入门到实践
本文详细介绍了Chrome插件的开发,从基础概念到实战技巧。首先,解释了插件的结构,包括manifest.json、背景脚本、内容脚本和UI界面。接着,阐述了生命周期、通信机制以及开发步骤,包括创建项目结构、编写manifest.json、开发脚本和UI,以及测试与调试。通过一个显示当前页面URL的插件实例,展示了具体实现过程。最后,讲解了如何在Chrome Web Store发布和分发插件。Chrome插件开发为开发者提供了创造个性化体验的平台,本文旨在引导读者入门并深入实践。
132 2
|
6月前
|
Web App开发 Java Serverless
Serverless 应用引擎操作报错合集之阿里函数计算中,使用自定义运行时部署程序时,发现Chrome层已经建立但运行程序仍然缺失如何解决
Serverless 应用引擎(SAE)是阿里云提供的Serverless PaaS平台,支持Spring Cloud、Dubbo、HSF等主流微服务框架,简化应用的部署、运维和弹性伸缩。在使用SAE过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
|
Web App开发 JSON 监控
Chrome浏览器扩展开发之自动化操作页面
Chrome浏览器扩展开发之自动化操作页面
448 0
|
Web App开发
chrome配置selenium操作
chrome配置selenium操作
117 0
|
Web App开发 SQL 存储
Chrome操作指南——入门篇(一)
Chrome操作指南——入门篇(一)
Chrome操作指南——入门篇(一)
|
Web App开发 存储 前端开发
Chrome操作指南——入门篇(二)
Chrome操作指南——入门篇(二)
Chrome操作指南——入门篇(二)
|
Web App开发 开发者
Chrome操作指南——入门篇(三)
Chrome操作指南——入门篇(三)
Chrome操作指南——入门篇(三)
|
Web App开发 前端开发 开发者
Chrome操作指南——入门篇(四) command
Chrome操作指南——入门篇(四) command
Chrome操作指南——入门篇(四) command