浏览器DevTools-控制台调试

控制台是浏览器开放给我们去调试页面中的元素, 逻辑, 快速高效的找到问题并修改的一个工具, 因而也许有一些我们不曾注意到的细节方面(关于console函数和chrome控制台)相关的, 将会被我们在下面进行介绍:

1.开启AI辅助分析报错/警告

这里开启满足下面条件才可以显示

• 已年满 18 周岁，并且位于支持此功能的地区。
• 使用的是 Chrome 125 或更高版本。
• 使用您的 Google 账号登录 Chrome。

2. 使用$在控制台——更快捷的访问页面元素

我们日常同页面中元素交互可能需要使用类似document.querySelector()…类似的选择器来,而chrome支持我们直接像jquery一样,使用$()来快速的和页面中的元素交互.

$(selector) 返回对具有指定 CSS 选择器的第一个 DOM 元素的引用。使用一个参数进行调用时，此函数是 document.querySelector() 函数的快捷方式。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

还有更多的快捷方法,参见: https://developer.chrome.com/docs/devtools/console/utilities?hl=zh-cn

3.置顶我们想要查看的表达式

当我们需要反复使用或者对比查看不同的表达式的时候, 上下滑动会非常耗费我们的精力,这个时候可以试试,点击console控制台上的眼睛icon

4. 使用CSS美化我们控制台的输出

chrome支持我们在使用console函数时使用格式说明符来设置控制台消息的格式,也就