系列
Chrome开发者工具教程
Chrome开发者工具中的JavaScript控制台
2020-02-01大约5分钟
用过Python或其它脚本语言都知道,一个简单的命令行控制台是多么的方便:敲一行或几行代码,就立刻能看到代码的结果,根本不需要临时创建个新文件。
JavaScript其实也有的,就是浏览器开发者工具里的Console 面板。
先小试牛刀一下:
你也可以按F12后,切换到Console 面板,复制下面的两段代码,亲手试一下。
程序1:
console.log("欢迎来到乐码范");
程序2:
function sayHello() {
console.log("欢迎来到乐码范");
}
sayHello();
还有更厉害的试验,拷贝下面代码到Console里面试一试?
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
var family = {};
family.mother = new Person("Susan", "Doyle", 32);
family.father = new Person("John", "Doyle", 33);
family.daughter = new Person("Lily", "Doyle", 5);
family.son = new Person("Mike", "Doyle", 8);
console.table(family, ["firstName", "lastName", "age"]);
Console虽然有一个独立的面板,但其实你仔细观察了的话,你会发现其它的面板都可以把Console面板调出来。使用Console,你不仅仅可以试验你的JavaScript代码,你也可以尝试对当前页面进行DOM操作,或对页面上的JS对象进行操作,十分方便。
可以用左上角的三个点按钮,控制Console的显示或关闭,也可以直接用快捷键Esc
来开或关闭。
你可以尝试一下下面的代码看看结果是什么?
document.getElementsByTagName('div');
Console里面的内容,可以在console里面鼠标右键菜单Clear console来清除。多多尝试,熟能生巧!