浏览器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函数时使用格式说明符来设置控制台消息的格式,也就是%+字符

想要使用CSS美化输出,我们需要用到%c的格式说明符

5.改变javascript运行上下文

默认情况下，JavaScript 上下文下拉列表设为 top，表示主文档的浏览上下文。

当我们的页面引入了inframe后, 我们想要调试这个iframe中的dom元素,这时候可以通过选择对应的运行上下文,让我们的js运行在这个ifrme中

关于控制台(console)更多的信息参考https://developer.chrome.com/docs/devtools/console/api?hl=zh-cn

我们可以使用

var people = [
  {
    first: 'René',
    last: 'Magritte',
  },
  {
    first: 'Chaim',
    last: 'Soutine',
    birthday: '18930113',
  },
  {
    first: 'Henri',
    last: 'Matisse',
  }
];
console.table(people);

输出堆栈的运行轨迹

const first = () => { second(); };
const second = () => { third(); };
const third = () => { fourth(); };
const fourth = () => { console.trace(); };
first();