Chrome開發者工具(Google devtool)基礎教學 - 網頁前端] 輕鬆學

Chrome開發者工具,是chorme瀏覽器中一個對網頁前端開發極為實用的工具，它可以讓你在不轉變頁面，改變網頁情況下，修改內裡的代碼， ... Chrome開發者工具(Googledevtool)基礎教學Publishedbythewayeasyon06/08/202006/08/2020Chrome開發者工具(Googledevtool)基礎教學Chrome開發者工具,是chorme瀏覽器中一個對網頁前端開發極為實用的工具，它可以讓你在不轉變頁面，改變網頁情況下，修改內裡的代碼，包括css、html、javascript，它也能夠讓你實時測試網頁效能，加速網站，並且檢查javascript運作是否正常。

由於其廣泛性及實用性，這是一個非常合適大家了解的工具。

 以下將會用較顯淺的方式，為大家基本介紹內裡部分開發者工具。

為了希望大家能夠對於內裡的內容更容易了解，我建議可以先先看（），讓你對於網頁架構有個初步了解。

Chorme開發者工具開啟方法DevicemodeElementsNetworkPerformance開啟方法A右鍵單擊網站任意位置，然後點選點選「檢查」B可以透過快捷鍵快速打開，windows的話在鍵盤上按ctrl+shift+c，ios則為cmd+shift+cDevicemodeDevicemode是Chrome開發者工具中一個可以要來模擬手機或平板電腦的工具，幫助你的網站能夠更切合手機或平板電腦需要。

功能主要如下：－模擬設備畫面－模擬網頁在不同網速和不同cpu占用率下開啟－模擬定位系統模擬設備畫面點擊右邊視窗裏，左上角的按鈕，此時左邊就會出現模擬設備的畫面基本功能調節模擬設備的大小這裡有四個方法，調節模擬設備的大小1－可以透過拖動欄位的方法調整2－可以透過更改數值作調整，前面為闊，後面為高3－可以透過點擊responsive，點選想模擬的特定設備4－可以點選上邊欄位，以模擬不同裝置大小想有更多模擬大小選項可以點選右邊的三點，然後選擇showmediaqueries，之後跟之前一樣只需要點選上邊的欄位就可以了旋轉視窗這裡也可以將視窗旋轉，只需要點選旋轉電話的圖案就可以了模擬設備框架想要模擬設備框架的話可以點選右邊的三點，然後選擇Showdeviceframe，這個需要你選擇的設備本身有框架才能夠顯示顯示標尺這個功能能夠有效地幫助你測量尺寸，協助您調整圖片文字等到合適大小，亦有助你使用css，調節位置想要打開標尺的話，可以點選右邊的三點，然後選擇ruler，注意，內裡使用的單位為px模擬網頁在不同網速和不同cpu下開啟點選online，然後選擇Mid-tiermobile或Low-endmobile。

Mid-tiermobile可以模擬快速3g網絡，並且把cpu性能降低四倍Low-endmobile可以模擬慢速4g網絡，並且把cpu性能降低六倍注意這裡是透過降低你電腦或平板電腦的cpu來模擬手機cpu效能，所以可能會和實際情況有差異若想獨立修改cpu性能的話可以參看：Performance若想獨立修改網絡速度的話可以在Network中的online調整模擬定位系統若網站是需要定位用家位置，那麼這個工具能夠幫助到你。

點選右邊視窗的三點，點選moretools，之後再點選sensor，然後把下面欄位拉上來，在location裡，可以透過點擊location右邊的方格選擇坐標，其中一個預設，或在下方欄位輸入坐標，來進行模擬手機定位ElementsElements版面是由兩個部分組成，分別為左邊的Html以及右邊的css。

我們可以透過右邊視窗裡的鼠標檔案，然後滑向並點擊需要更改的部分，以進行修改。

Html部分我們可以隨意更改後的html裏的內容，而且不會儲存。

只需要到希望更改的部分，然後點選右鍵，就會出現以下選項：各選項解釋：Edit,AddandCopy:允許您進行html的修改和複製，亦可以透過在想修改的內容兩下，以進行修改HideandDelete:可以讓點選的項目暫時消失ExpandandCollapse:讓點選的項目顯示更多，亦可透過點擊向下和向右的三角形來打開和收回ScrollintoView:讓畫面到你點選的部分SetBreakpoints:選擇後，當系統運行到你點選的地方時，他會讓系統不再讀取接下來的javascriptcss部分左上有六個項目，分別為styles，EventListeners，DOMBreakpoints，Properties，分別用途如下：Styles：修改css的地方，記住第一個的element.style只是為html裏添加style，與css無關。

另外，這個版面是根據css的，所以通常越上，代表和你選取的項目越接近，但請務必先滑向｛出面的文字，以檢查是否你想改變的項目。

還有，當滑鼠劃向每格的右下角是，會出現5個圖標，由左至右分別為：-添加文字陰影-為選取項目裏的邊框添加陰影-改變文字顏色-為選取項目裏的背景添加背景色–另新開一行作編輯EventListeners:要來查看javascript裏eventlistener的地方。

所謂，eventlistener，其實就是一個javascript系統，會根據用家所作出的操作，來作出反應，如滑鼠點擊、滑鼠移動，就是其中的簡單例子DOMbreakpoint：查看在剛介紹了的html版面中，設定了的javascript停止位。

Computed：可以查看Boxmodel 關於boxmodel的基本解釋:其實每個項目都是由一個一個格去形成，所以當你用右邊視窗裡的鼠標圖案點擊項目時，無論是圖片還是字都會顯示一個一個的長方格。

boxmodel就是要來顯示這些格裏內容，邊框等部分，所佔的大小。

中心點：就是顯示出來的文字或圖片，在這裡翻譯就是它的中心點padding：border和中心點之間的空間，就是paddingborder：就是一個格的邊框margin：邊框出面的空間，這個數字越大，格與格之間的距離就會越大。

另外在Computed也可以整體查看選取項目的基本資訊，如字體、字的粗度、行距等等。

Accessibility:可以知道電腦上載網站的流程Network只需要載入網站，並打開了chrome開發者工具，系統就會自動幫你記錄載入情況。

此外，亦可透過crtlr或cmd r，協助chrome開發者工具讀取網頁。

工具由左至右圖示的大概用途：紅色圓圈，點擊可停止記錄，再點擊則重新記錄禁止圖示：可清除記錄漏斗圖示：可顯示或取消顯示過濾用的工具欄preservelog：不讀取於console裏輸入的項目DisableCache: 停止使用快取online:可以用來模擬不同的網絡速度，亦包括離線狀態下面版面的大概介紹：name：檔案名稱type：檔案種類idnicator：顯示包括域名，檔案位置及檔案名稱size：檔案大小time：系統送出要那檔案的信息，到系統真正接受到檔案的時間waterfall：將time圖像化地顯示出來，方便你針對情況作修改，藍色：下載檔案的時間，綠色：等待的時間，輕滑過去可以看到更多資訊Performance相比network，這裡較著重於網頁載入情況，以及過程中所佔用的cpu。

想調校cpu速度，可以在設定裡單獨調節。

要測試網頁的performance：只需要點選reload就可以了。

圖表基本解釋：上方圖表綠色部份代表frames紫黃色部份代表著cpu使用率，他的總結可以在下方的圖表看到黃色的表示對js的操作所佔內存紫色表示對css操作所佔的內存灰色表示其他操作所佔的內存藍色表示對html操作所佔的內存FramesFrames=FPS=畫面每秒重新整理多少次,通常設備屏幕的重新整理頻率是60FPS，超過的話，則有可能產生卡頓現象。

通常，沒有優化妥善的javascript，css，html，以及版面佈局，都會導致這種情況出現縮圖縮圖為網站繪製的情況，頁面繪製速度越快，代表客戶能夠越快就能夠看到網站內容，這對網頁速度評分有極重要影響。

Bottom-up根據花費時間，去列出各項目Call-tree和bottom-up基本相同，但資料更仔細總結當然，google開發者工具比上述所列的還要多得多，他的功能也被你想像中要大得多。

希望這篇文章，能夠幫助到你們，對google開發者工具有初步認識吧你也許會喜歡:【WordPress主題】7大方向，助你更輕鬆選擇高質量的主題03/08/2020尚無留言【woredpress主題】7大方向，助你更輕鬆選擇高質量的主題WReadMore»【wordpress主題】免費？還是付費？一文助你輕鬆選擇03/08/2020尚無留言【wordpress主題】免費wordpress主題？還是付費worReadMore»【WordPress免費主題推介】5個最值得使用的wordpress免費主題03/08/2020尚無留言【woredpress免費主題推介】5個最值得使用的woredpreReadMore»Categories:Wordpresswordpress主題Wordpress基礎篇0Comments發佈留言取消回覆發佈留言必須填寫的電子郵件地址不會公開。

必填欄位標示為*Name*Email*WebsiteWhat'sonyourmind?在瀏覽器中儲存顯示名稱、電子郵件地址及個人網站網址，以供下次發佈留言時使用。

分類Wordpresswordpress主題Wordpress基礎篇網頁前端技術近期文章Chrome開發者工具(Googledevtool)基礎教學【WordPress主題】7大方向，助你更輕鬆選擇高質量的主題【wordpress主題】免費？還是付費？一文助你輕鬆選擇RelatedPostsWordpress【WordPress主題】7大方向，助你更輕鬆選擇高質量的主題【woredpress主題】7大方向，助你更輕鬆選擇高質量的主題WReadmore…Wordpress【wordpress主題】免費？還是付費？一文助你輕鬆選擇【wordpress主題】免費wordpress主題？還是付費worReadmore…Wordpress【WordPress免費主題推介】5個最值得使用的wordpress免費主題【woredpress免費主題推介】5個最值得使用的woredpreReadmore…