寫在前面：
在簡書看了一篇很全面的博客https://www.jianshu.com/p/b25c5b88baf5，內容文字幾乎都是原作的，圖片是我自己加的，也順帶回顧下暑期實習。
上個學期四五月份開始零基礎學習前端，當時對於谷歌瀏覽器的控制台沒什么概念，有幸暑假在公司實習兩個月，分享一下我使用谷歌瀏覽器的調試心得。
調試工具：
一、箭頭按鈕和設備圖標
箭頭按鈕：用於在頁面選擇一個元素來審查和查看它的相關信息，箭頭按鈕會變成選擇狀態。
點擊后可以在頁面上選中自己想要的元素，如下圖：
設備圖標：點擊它可以切換到不同的終端進行開發模式，移動端和pc端的一個切換，可以選擇不同的移動終端設備，同時可以選擇不同的尺寸比例，chrome瀏覽器的模擬移動設備和真實的設備相差不大，是非常好的選擇。如下圖可見：
二、Elements
用來查看，修改頁面上的元素，包括DOM標簽，以及css樣式的查看，修改，還有相關盒模型的圖形信息。
下圖我們可以看到當我鼠標選擇id為main的div元素時，右側的css樣式對應的會展示出此id的樣式信息，此時可以在右側進行一個修改，修改即可在頁面上生效。因為每在編輯器中修改一次代碼就刷新頁面實在是太低效了，而且很不方便。
盒模型的圖形信息
三、Console
用於打印和輸出相關的命令信息，其實console控制台除了我們熟知的報錯，打印console.log信息外，還有很多相關的功能，下面簡單介紹幾個：
（1）一些對頁面數據的指令操作，比如打斷點正好執行到獲取的數據上，由於數據都是層層嵌套的對象，這個時候查看里面的key/value不是很方便，即可用這個指令開查看，obj的json string 格式的key/value，我們對於數據里面有哪些字段和屬性即可一目了然。
（2）除了console.log還有其他相關的指令可用（console.error，console.warn等）
三、Sources
js資源頁面：這個頁面內我們可以找到當然瀏覽器頁面中的js 源文件，方便我們查看和調試。可以看一些大站的js代碼，雖然基本都看不懂，但是最起碼可以看看人家的代碼風格，人家的命名方式。所有的代碼都是壓縮之后的代碼，我們可以點擊下面的{}大括號按鈕將代碼轉成可讀格式。
Sinppets：當我們想在控制台隨意寫一些測試代碼，或者想測試一下剛剛寫的方法是否會出現期待的樣子，但是控制台一打回車本想換行但是卻執行剛寫的半截代碼（其實在控制台里編寫代碼換行也是可以的，按shift+enter鍵就可以換行啦，不過還是有點麻煩，mac和windows系統都適用），所以推薦使用Sources下面的左側的Sinppets代碼片段按鈕，這時候點擊創建一個新的片段文件，寫完測試代碼后把鼠標放在新建文件上run或者點擊右邊的
，再結合控制台查看相關信息（新建了一個名叫：test的片段代碼，在你的項目環境頁面內，該片段可執行項目內的方法）
Content scripts： Chrome 的一種擴展程序，它是按照擴展的ID來組織的，這些文件也是嵌入在頁面中的資源，這類文件可以讀寫和操作我們的資源，需要調試這些擴展文件，則可以在這個目錄下打開相關文件調試，但是幾乎我們的項目還沒有相關的擴展文件，所以啥也看不到，平時也不需要關心這塊。
斷點調試：
（1）如何打斷點
找到要調試的文件，然后在內容源代碼左側的代碼標記行處點擊即可打上一個斷點。
（2）斷點與js代碼修改
看下面這張圖，我在一個名為toggleTab的方法下打了兩個斷點，當開始執行我們的點擊切換tab行為后，代碼會在執行的斷點出停下來，並把相關的數據展示一部分，此時可以在已經執行過得代碼處，把鼠標放上去，即可查看相關的具體數據信息，同時我們可以使用右側的功能鍵進行調試，右側最上面一排分別是：暫停/繼續、單步執行(F10快捷鍵)、單步跳入此執行塊(F11快捷鍵)、單步跳出此執行塊、禁用/啟用所有斷點。下面是各種具體的功能區
在當前的代碼執行區域，在調試中如果發現需要修改的地方，也是可以立即修改的，修改后保存即可生效。
四、Network
網絡請求標簽頁，可以看到所有的資源請求，包括網絡請求，圖片資源，html,css，js文件等請求，可以根據需求篩選請求項，一般多用於網絡請求的查看和分析，分析后端接口是否正確傳輸，獲取的數據是否准確，請求頭，請求參數的查看。
還可以看到一些請求頭以及具體的信息：
寫在后面：
笨博客只介紹了這幾個比較常用的，實際上還有幾個不太頻繁使用的，例如Memory、Audits等，可以要用到的時候再查閱資料。