(1)你真的會用Chrome devtool嗎？

本文首發於個人我的博客: teobler.com ,轉載請註明出處

這是一個介紹Chrome devtool的系列文章，雖然這是一個前端小夥伴們都很熟悉的東西，可是我相信它的不少還不錯的功能其實或許你並不知道，這個系列的文章會涉及到: 代碼修改、debug、network、audit、monitor等等。

第一篇咱們會介紹如何在devtool中作編輯和debug。

Editing

編輯HTML和CSS

首先是你們熟悉的HTML和Style，在elements的tab下，只須要雙擊某個元素的內容便可進入編輯模式，這時你能夠隨意修改其中的內容，同理在其右邊的style欄，你可使用相同的方式修改CSS樣式。

保存你本身的調色板

在style欄中，點擊任意顏色圖標，你就能夠打開一個調色板，此時再點擊第二行的箭頭，你就能打開一個預設的調色板保存界面。

裏面預先保存了Material UI的配色方案，你也能夠保存你本身的配色方案，這對於本身一我的想要開發一個項目卻爲配色方案捉急的開發者提供了便利，你能夠平時收集一套你本身的配色方案進行保存並隨時取用，由於這個調色板還提供了當前網站的配色方案，也就是說你能夠打開一個你以爲配色不錯的網站保存它的配色。

滾動某個元素到頁面內

這個功能對於一些無限滾動的網站開發更有用，好比你在elements tab下找到了你的目標元素，可是你想看看它長得像不像你想象中的樣子，沒有這個功能的話你就須要一直找，此時你只須要右鍵那個元素，選擇Scroll into view便可。

隱藏和顯示元素

你能夠在某個元素上右鍵選擇隱藏某個元素，其原理是Chrome爲其加了一個visibility爲hidden的class，右鍵又能夠顯示，固然你還能夠選擇刪除，想讓它回來的話ctrl/command z便可。

元素狀態的改變

如圖所示，選中某個元素後再點擊:hov能夠打開一個狀態面板，這能夠幫助你看清楚不一樣狀態下該元素的CSS樣式。

顯性樣式

在一個複雜的項目中，可能同一個元素上你覆蓋了不少個樣式，就拿body元素來講，瀏覽器有一個默認的樣式，而後可能你使用了一些reset的樣式，同時你在某個文件中還加入了別的樣式，若是這個時候你想知道body的樣式到底是哪裏來的，若是你用眼睛在styles的tab裏面找就會很難。

這個時候咱們能夠選擇第二個tab Computed 在這個tab裏是最終顯示在頁面上的樣式，而且若是你點擊某個樣式右邊的按鈕，就會跳轉回style tab並把這個生效的樣式高亮出來，幫助你快速找出準確的class。

查找事件監聽

這個功能能夠找到當前頁面中的全部時間監聽函數，而且點擊右邊的超連接能夠跳轉到對應的代碼，這個功能在你「知道某個bug是由於某個監聽引發的，可是不知道這個監聽函數在哪」的時候頗有用。

改變顏色格式

在任意顏色上按住shift + 左鍵能夠改變顏色的格式(rgb, hsl, hex)，能夠方便的幫助你改變網站的顏色與設計相一致。

源代碼format

一般在prod環境的代碼都通過壓縮，這會致使咱們在看源代碼的時候全部代碼被壓縮到同一行致使不可讀，這時咱們能夠點擊format按鈕使得代碼變回在編輯器中的樣子。

DOM斷點

有一些代碼會影響DOM的渲染，而後若是這些代碼產生了相應的bug，好比渲染出來的DOM不是你想的哪樣，這時咱們能夠在DOM上打斷點，這時若是DOM發生了改變，Chrome就會跳轉的相應的代碼的debug界面，是一個方便的debug方式。

能夠選擇在 子節點改變 / 屬性改變 / 節點被刪除 時進行斷點調試。

元素選擇歷史

在HTML的界面，你選中某一個元素，而後打開console界面，輸入$0將輸出你剛剛選中的元素，選擇器。

這裏有一個小練習看你能不能用上邊的知識完成。

debug

第二個咱們用的比較多的功能就是debug了，這篇文章咱們會介紹如何使用Chrome devtool來進行debug。

斷點調試方法

第一種debug的方式是當你在本地啓動了你的dev server，而且在你想要打斷點的代碼處寫上debugger關鍵字，那麼當你打開devtool訪問你的頁面並刷新頁面時你就能停在debugger的地方。

第二種方式是打開devtool的sources tab，找到你想debug的文件(cmd + p / cmd + shift + p)，而後在行號上點擊，就會加上一個藍色標記，這時若是你刷新頁面也能夠進入斷點調試。

調試面板結構

• Watch能夠添加變量或者一段代碼進行一些運算，這些變量或者運算會隨着你的斷點的變化而變化進行實時更新，方便進行調試，須要注意的是若是當前斷點的上下文中找不到這個變量，會顯示undefined
• Call Stack就是調用棧，能夠看到當前斷點的調用信息，點擊不一樣的行，能夠跳轉到不一樣的調用處
• Scope顯示了當前你能夠訪問的全部上下文
• Breakpoints顯示了你的全部斷點，能夠方便的在各個斷點處跳轉，也能夠當作開關來用，能夠在此處選擇忽略哪些斷點，或是直接刪除不須要的斷點
• XHR Breakpoints能夠添加網絡請求的斷點
• DOM Breakpoints就是以前講過的DOM斷點
• 同理Event Listener Breakpoints能夠在觸發相應的事件時產生斷點進行調試

跳過黑盒代碼

有時候咱們會想要看看咱們的當前的函數調用棧，可是一般來講咱們會在咱們的app裏面引入許多第三方庫，好比React，那麼在你看調用棧的時候，你就會進入到React的調用棧中，然而咱們並不想看React，因此咱們能夠選擇隱藏這些調用棧:

或者你嫌麻煩的話，能夠直接在devtool的設置裏將整個庫都給隱藏:

條件斷點和XHR斷點

想象一個場景，咱們的某個地方用到了咱們代碼中的一個通用函數，可是用的時候出問題了，咱們想打個斷點看看，可是因爲這是一個通用的函數，咱們刷新頁面後這個函數會被調用屢次，可是咱們只關心其中的某一次，這個時候咱們就須要跳過咱們不關心的調用，除了一直手動點跳過按鈕，還能怎麼辦呢？

右鍵行號，選擇conditional breakpoint而後輸入你的條件，好比 user.name === "小明"，這時只有當知足相應條件的時候纔會斷點。

而假如咱們將上面的例子運用在網絡請求上，當咱們向某個特定的url發送請求時，產生一個斷點，咱們就能夠在右邊的XHR/Fetch Breakpoints中添加相應的url。

不過須要注意的是，此時的斷點可能會斷在Chrome的源碼中或者別的什麼地方，咱們須要在Call Stack中找到正確的文件。

歡迎關注個人公衆號