chrome的使用

1.console.log的使用

若是參數是格式字符串（使用了格式佔位符），log方法將佔位符替換之後的內容，顯示在console窗口。

 

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

2.其餘輸出方法：debug , info , warn , error方法的使用

console.error("Error: %s (%i)", "Server is not responding",500)
// Error: Server is not responding (500)
console.warn('Warning! Too few nodes (%d)', document.childNodes.length)
// Warning! Too few nodes (1)

3.console.table()的使用方法 //注意兩種表格打印的主鍵

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

或者

var languages = {
    csharp: { name: "C#", paradigm: "object-oriented" },
    fsharp: { name: "F#", paradigm: "functional" }
};
console.table(languages);

4.time和timeEnd的用法，能夠用來計算程序執行的時間，在火狐的console命令行才能看到

console.time('start');
for(var i=0;i<1000;i++){console.log(i)}
console.timeEnd('start');

5.debugger語句

debugger語句的做用是，當代碼運行到這一行時，就會暫停運行，自動打開console界面。它一般用於代碼除錯，做用相似於設置斷點。

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

6.模擬手機視窗（viewport）

chrome瀏覽器的開發者工具，提供一個選項，能夠模擬手機屏幕的顯示效果。

打開「設置」的Overrides面板，選擇相應的User Agent和Device Metrics選項。

7.模擬touch事件

咱們能夠在PC端模擬JavaScript的touch事件。

首先，打開chrome瀏覽器的開發者工具，選擇「設置」中的Overrides面板，勾選「Enable touch events」選項。

而後，鼠標就會觸發touchstart、touchmove和touchend事件。（此時，鼠標自己的事件依然有效。）

至於多點觸摸，必需要有支持這個功能的設備才能模擬，具體能夠參考Multi-touch web development。

8.模擬經緯度

chrome瀏覽器的開發者工具，還能夠模擬當前的經緯度數據。打開「設置」的Overrides面板，選中Override Geolocation選項，並填入相應經度和緯度數據

補加一句，目前chrome瀏覽器裏Overrides面板打開是按這個