Chrome开发者工具 – 学习画板

首页 » 记事本 » Chrome开发者工具

Chrome开发者工具

按F12或者Control+Shift+i,打开Chrome浏览器自带的“开发者工具”(Developer Tools)

console

1.console.log

log方法用于在console窗口显示信息。 如果参数是普通字符串,log方法将字符串内容显示在console窗口。

console.log("Hello World")
// Hello World
console.log("a", "b", "c")
// a b c

如果参数是格式字符串(使用了格式占位符),log方法将占位符替换以后的内容,显示在console窗口。

console.log(" %s + %s = %s", 1, 1, 2)
//  1 + 1 = 2

2.console.table

var languages = [{
    name: "JavaScript",
    fileExtension: ".js"
}, {
    name: "TypeScript",
    fileExtension: ".ts"
}, {
    name: "CoffeeScript",
    fileExtension: ".coffee"
}];
console.table(languages);

3.console.assert

assert方法用来验证某个条件是否为真。如果为假,则显示一条事先指定的错误信息。

console.assert(list.childNodes.length < 500, "Node count is > 500");

4.time和timeEnd

console.time("Array initialize");
var array = new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.timeEnd("Array initialize");
// Array initialize: 1914.481ms

5.其他

  • console.dir:输出对象的信息,用于显示一个对象的所有属性。
  • console.clear:对console窗口进行清屏,光标回到第一行。
  • console.trace:当前执行的代码在堆栈中的调用路径。

debugger

当代码运行到这一行时,就会暂停运行,自动打开console界面。它通常用于代码除错,作用类似于设置断点。

for (var i = 0; i < 5; i++) {
    console.log(i);
    if (i === 2) debugger;
}

移动端开发

1.模拟手机视口(viewport)

打开“设置”的Overrides面板,选择相应的User Agent和Device Metrics选项。

2.模拟touch事件

选择“设置”中的Overrides面板,勾选“Enable touch events”选项。然后,鼠标就会触发touchstart、touchmove和touchend事件。

此文章发表在 记事本. 将 固定链接 加入收藏.