Chrome調試----js調試技巧

說到js調試，相信你們都不陌生哈，最多見的兩種方式：

①利用alert（）來打印想要的結果。

② 利用 console.log() 方法在JavaScript 控制檯上輸出內容。

這兩種方法基本解決了一些小型的javascript的調試問題。如今隨着chrome瀏覽器的強大功能，瀏覽器裏也能夠調試js

第一步，打開chrome瀏覽器，選擇這三個點的圖標，選擇下圖所示的更多工具-開發者工具（或者選擇快捷方式 ctrl+shift+I）

第二步，打開須要調試的頁面，例如如下網址

①左側是內容源，包括頁面中的各類資源 。其中，又分 Sources 和 Content scripts。

 Sources 就是頁面自己包含的各類資源，它是按照頁面中出現的域來組織的，另外，異步加載的 js 文件，在加載後也會出如今這裏的。

Content scripts 是 Chrome 的一種擴展程序，它是按照擴展的ID來組織的，這類擴展實際也是嵌入在頁面中的資源，它們也能夠讀寫DOM。編寫、調試這類擴展的開發者纔要關心它們，若是你的瀏覽器沒安裝任何擴展，那麼 Content scripts 就看不到任何東西。

②中間主區域用於展現左邊資源文件的內容（在這個區域能夠設置斷點--單擊就ok）

③右邊是調試功能區（最上面的一排按鈕分別是暫停/繼續、單步執行、單步跳入、單步跳出、禁用/啓用全部斷點------快捷鍵F11是進入下一步，shift+F11跳出進入下一步，F8跳到下一個斷點）

以下圖所示

④能夠點擊audits 改進你的網站（這個剛剛嘗試了一下感受有點慢，沒等結果出來）

YSlow是一個很是棒的工具。谷歌瀏覽器的開發者工具裏也有一個很是相似的工具，叫Audits。

它可快速的審計你的網站，給你提出很是實際有效的優化你的網站的建議和方法。

⑤移動設備模擬環境（還沒測試）

谷歌瀏覽器裏有一些很是有趣的模擬移動設備的工具，幫助咱們調試程序在移動設備裏的運行狀況。

找到它的方法是：按F12，調出開發者工具，而後按ESC鍵(當前tab不能是Console)，你就會看到第二層調試窗口出現，裏面的Emulation標籤頁裏有各類模擬設備可選。

固然，這不會就變成了真正的iPhone，只是模擬了iPhone的尺寸，觸摸事件和瀏覽器User Agent值。