Chrome操作指南——入门篇(十)调试小技巧

简介: Chrome操作指南——入门篇(十)调试小技巧

前言


上一章我们说到可以给每一条日志加上时间戳timestamps,来更好的分析日志信息。但有时候我们可以需要的不是这样,可能更需要的是代码的执行时间,对于这种情况,我们可以用的console的另一对方法来实现。


console.time() 和 console.timeEnd()


  • console.time(timerName):开启一个计时器。timerName:计时器的名字。默认名是default。

  • console.timeEnd(label): 结束计时并且将结果在 console 中打印出来。label:需要停止的计时器名字。


image.png


console.dir(...)


  • console.dir(object): 显示object的JavaScript 对象的属性。


有时候我们可能想查看某些DOM节点的信息,以及相关的属性。我们就可以通过$('')和console.dir()结合来实现这个操作。


console.dir($('li'))
复制代码


image.png


console.log()的样式


有时候访问某些网站的时候,你会发现在他们的控制台会出现一些各种样式的log信息。


比如知乎:


image.png


当给打印的文本中加上$c,那么%c后的文本,就可以在console.log的第二个参数中加入css代码来修改样式。


console.log('%c彼时彼刻恰如此时此刻', 'color: red;font-size: 50px')
复制代码


image.png


当然,我们也可以根据自己的需要,打印各种各样的样式。


console.log('%c彼时彼刻恰如此时此刻', 'color: gray;font-size: 100px;text-align: center;background-color: #3c9;background-image: linear-gradient(0deg, #fff 5%, transparent 5%, transparent),linear-gradient(90deg, #fff 5%, transparent 5%, transparent);background-position: 0 0, 20px 20px;background-size: 20px 20px;')
复制代码


image.png

相关文章
|
7月前
|
Web App开发 JavaScript 前端开发
chrome调试秘籍,让你的开发速度飞起来
chrome调试秘籍,让你的开发速度飞起来
109 1
|
4月前
|
Web App开发 监控 前端开发
重磅! Chrome开发者工具入门
重磅! Chrome开发者工具入门
|
5月前
|
Web App开发 前端开发 JavaScript
Chrome插件实现问题之用户在浏览器中输入URL后,浏览器进程会进行什么操作
Chrome插件实现问题之用户在浏览器中输入URL后,浏览器进程会进行什么操作
|
5月前
|
Web App开发 存储 监控
如何使用 Chrome DevTools 进行前端性能监控和调试?
如何使用 Chrome DevTools 进行前端性能监控和调试?
|
5月前
|
Web App开发
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
|
5月前
|
Web App开发 JavaScript 开发者
谷歌浏览器chrome安装vue调试插件Vue-Devtools
谷歌浏览器chrome安装vue调试插件Vue-Devtools
344 0
|
6月前
|
Web App开发 JSON 前端开发
网络调试利器:Chrome Network工具的详细指南
Chrome开发者工具的Network面板是测试工程师的利器,用于监视HTTP请求、响应及资源加载。打开它可通过右键点击页面选择“检查”或使用快捷键。界面包含请求列表和详细信息,如Headers、Preview、Response、Timing。过滤器帮助定位特定请求,而瀑布流图展示加载顺序。模拟网络环境和保存HAR文件功能便于性能分析和问题排查。
|
7月前
|
Web App开发 JavaScript 前端开发
【专栏】如何使用 Chrome DevTools 的断点功能提升前端调试效率, 花式打断点
【4月更文挑战第29天】本文介绍了如何使用 Chrome DevTools 的断点功能提升前端调试效率。从基本的行断点和函数断点,到更高级的条件断点、DOM 断点、XHR 断点和事件断点,以及代码注入断点,详细阐述了各种断点的设置和应用场景。通过断点调试实战案例,如异步操作、复杂逻辑和性能优化,展示断点在解决实际问题中的重要作用。掌握这些技巧能有效提高开发质量和效率。
474 1
|
7月前
|
Web App开发 搜索推荐 前端开发
【热门话题】Chrome 插件研发详解:从入门到实践
本文详细介绍了Chrome插件的开发,从基础概念到实战技巧。首先,解释了插件的结构,包括manifest.json、背景脚本、内容脚本和UI界面。接着,阐述了生命周期、通信机制以及开发步骤,包括创建项目结构、编写manifest.json、开发脚本和UI,以及测试与调试。通过一个显示当前页面URL的插件实例,展示了具体实现过程。最后,讲解了如何在Chrome Web Store发布和分发插件。Chrome插件开发为开发者提供了创造个性化体验的平台,本文旨在引导读者入门并深入实践。
160 2
|
7月前
|
Web App开发 Java Serverless
Serverless 应用引擎操作报错合集之阿里函数计算中,使用自定义运行时部署程序时,发现Chrome层已经建立但运行程序仍然缺失如何解决
Serverless 应用引擎(SAE)是阿里云提供的Serverless PaaS平台,支持Spring Cloud、Dubbo、HSF等主流微服务框架,简化应用的部署、运维和弹性伸缩。在使用SAE过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。