您可以使用浏览器的开发人员控制台做很多事情，这是五个重要的事情。请注意，做这些事情的确切方法可能因浏览器而异，但这是同一想法。在本文中，我采用了“ Google Chrome Way” ;
-
临时查看和编辑CSS（使用“元素”选项卡中的样式面板）
-
检查javaScript是什么导致对元素进行更改的原因。在“元素”选项卡中查看所讨论的元素。右键单击“突破...”。选择“属性修改”
-
调试JavaScript
“源”选项卡中有一个调试面板，您可以在不同的点暂停应用程序，并在该点查看变量状态。 -
在“网络”选项卡中检查请求和响应的流量
调试时，查看确切的详细请求和响应数据非常有帮助。 -
检查您的控制台（使用控制台面板）并将物品记录到控制台中。
a。常规
console.log（）
打印到控制台。
console.log( "hello my friends")
b。插值
console.log（“你好我是％s string'，）
与C语言的printf（）函数相似。
console.log("hello my %s", "friends")
c。风格
console.log（'％c一些文本...'，）
它使我们可以使用具有'％c'
的CSS来对第一个参数进行造型
console.log("%chello my friends", "font-size:50px")
e。警告
console.warn（）
在它之前用黄色感叹号打印到控制台。
console.warn("your are dead")
f。错误
console.error（）
在它之前用红色X图标打印到控制台。
console.error("i fond anera!")
g。测试
console.Assert（，）
如果是错误的，将输出到控制台。
console.assert(2===2,"wrong")
console.assert(2===3,"wrong")
h。查看dom元素
console.log（）
将其及其属性和内容打印到控制台。
console.dir（）
打印出属性和方法的下拉列表。
let p=document.getElementById("result")
console.log(p)
console.dir(p)
i。组
console.group（）
console.groupend（）
打印出下拉菜单，将一组控制台组合在一起。必须相同以开始和结束下拉列表。
console.groupcollapsed（）
默认情况下，下拉栏将被打印出未汇总，使用上面的方法，而不是控制台。组更改此行为。
console.group("wow");
console.log("start");
console.log("middle");
console.log("finish");
console.groupEnd("wow");
console.groupCollapsed("wow");
console.log("start");
console.log("middle");
console.log("finish");
console.groupEnd("wow");
j。计数
console.count（）
附加次数已被打印出来。
console.count("niza");
console.count("anna");
console.count("niza");
console.count("anna");
k。时间
console.time（）
Console.TimeEnd（）
打印出时间和时间到之间的时间。必须相同。
console.time("cat");
fetch('https://catfact.ninja/fact')
.then((response) => response.json()
.then((data) => console.log(data));
console.timeEnd("cat");
l。表
console.table（）
打印出对象属性和值的表。
let journal = [
{events: "work", time: "6:00 AM"},
{events: "ice cream", time: "4:30 PM"},
{events: "beer", time: "6:00 PM"}
];
console.table(journal);
m。清除
console.clear（）;
清除控制台。