这是英文原版的
下面是中文的
打开开发者工具以后,顶端有多个面板。
Elements:查看网页的 HTML 源码和 CSS 代码。
Console:用来运行 JavaScript 命令。
Sources:查看网页加载的脚本源码。
Network:查看网页的 HTTP 通信情况。
Performance:查看网页的性能情况,比如 CPU 和内存消耗。
下面两个没找见
Resources:查看网页加载的各种资源文件(比如代码文件、字体文件 CSS 文件等),以及在硬盘上创建的各种内容(比如本地缓存、Cookie、Local Storage等)。
Timeline:查看各种网页行为随时间变化的情况。
console 对象
console对象是 JavaScript 的原生对象,可以输出各种信息到控制台,并且还提供了很多有用的辅助方法。
console的常见用途有两个。
调试程序,显示网页代码运行时的错误信息。
提供了一个命令行接口,用来与网页代码互动。
warn方法和error方法也是在控制台输出信息,它们与log方法的不同之处在于,warn方法输出信息时,在最前面加一个黄色三角,表示警告;error方法输出信息时,在最前面加一个红色的叉,表示出错。同时,还会高亮显示输出文字和错误发生的堆栈。其他方面都一样。
对于某些复合类型的数据,console.table方法可以将其转为表格显示。
var languages = [{name: "JavaScript", fileExtension: ".js" },{name: "TypeScript", fileExtension: ".ts" },{name: "CoffeeScript", fileExtension: ".coffee" }];console.table(languages);
debugger 语句
debugger语句主要用于除错,作用是设置断点。如果有正在运行的除错工具,程序运行到debugger语句时会自动停下。如果没有除错工具,debugger语句不会产生任何结果,JavaScript 引擎自动跳过这一句。
Chrome 浏览器中,当代码运行到debugger语句时,就会暂停运行,自动打开脚本源码界面。
如果觉得《关于谷歌浏览器开发者工具》对你有帮助,请点赞、收藏,并留下你的观点哦!