今天的文章主要是針對那些正在開始他們的IT之旅的人。最近，我經常與那些正在學習他們的第一門程式語言或想轉行做技術的人打交道，我注意到許多教程都在展示如何構建東西，但幾乎沒有展示如何閱讀現有的程式碼、除錯錯誤或找到修復錯誤的方法。這很令人驚訝，因為在 “現實生活 “中，我們經常使用現有的程式碼庫（新增新功能、修復錯誤、改變業務邏輯等），而不是從頭開始編寫程式碼。此外，知道如何在你的程式碼中發現問題也是非常重要的–不僅僅是按部就班地學習教程。
在這篇文章中，我想向你展示Chrome瀏覽器中的一些免費功能，它們可以幫助你解決這些問題。我希望它能激勵你更多地嘗試程式設計，併成為一個更好的開發者!
什麼是Chrome開發工具
讓我們先簡單介紹一下Chrome DevTools。這是一套內建於Chrome瀏覽器的開發者工具，完全免費。要開始使用它們，你只需要在Chrome瀏覽器中開啟要測試的頁面，然後開啟Chrome DevTools。你可以用很多方法來做：
右鍵點選頁面上的任何元素，從選單中選擇檢查選項使用瀏覽器右上方的3點選單–>選擇更多工具，然後–>開發工具選項使用快捷鍵（Linux/Windows上的ctrl + shift + I或Mac上的cmd + shift + I）之後，你會看到一個類似於下面截圖中可見的面板。
提示：你的面板可以作為一個單獨的視窗可見，也可以在頁面的右/左/下側。如果你想改變這一點，在Chrome DevTools面板的右上方找到3點選單，點選Dock side的首選模式選項。
有許多標籤和選項可用，但在今天的文章中，我們將專注於最基本的一個- Elements。它主要用於預覽頁面的HTML結構和樣式。我們可以在這裡做什麼？
預覽整個頁面的HTML結構
是的，我以前說過，但讓我們把這個話題延伸一下。正如你所看到的，在Elements標籤中，你可以預覽頁面上所有可見的HTML節點。為什麼這很重要？例如，你可以檢查所有的元件是否正確顯示（在初學者中，為一些小工具建立一個單獨的元件而忘記在頁面上使用它們，這是一個超級流行的錯誤）。你還可以檢查頁面上元素的順序和巢狀（哪個元素在哪個裡面）。要擴充套件/摺疊節點，只需使用該行開頭的箭頭。
預覽特定節點
當你在網頁上看到一些問題時，你可能想把注意力集中在某個特定的區域/節點上，而不是看整個頁面。有幾種方法可以做到這一點：你可以直接右鍵點選頁面上的元素，然後從選單中選擇檢查選項（即使頁面上沒有開啟Chrome DevTools，它也能發揮作用），你可以在元素預覽中通過擴充套件部分找到該元素，或者你可以點選Chrome DevTools中的選擇器圖示（在面板的左上方）並選擇頁面上的節點。
選擇後，給定的節點將在DevTools面板的Elements預覽中被突出顯示，所以你可以看到哪個確切的HTML標籤負責顯示給定的部分。這個元素也會在頁面上突出顯示，並有額外的資訊–邊緣部分將被標記為橙色，填充部分為綠色，一個小的彈出視窗將顯示應用於該元素的樣式預覽。你可以在下面的截圖中看到它。
我們在這裡可以看到什麼？”How to start programming in 2022″ 是一個標有id=”32bb” 的h1標籤的標題元素，並應用了許多樣式類（不要擔心它們的命名–這是Javascript醜化和減化對頁面的影響，使原始碼更小，載入更快，更難被其他開發者竊取:) ). 這個彈出視窗向我們展示了造型的摘要–顏色、字型、邊距和元素的對比。橙色區域顯示了應用於該元素的上邊距（注意，在DevTools中，右側有一個彩色的盒子，從這裡我們可以讀出上邊距為19.2px）。還有一個部分是關於應用於這個元素的所有樣式的資訊。我將在下面的章節中多寫一點關於樣式的內容，但不要害怕玩一下所有這些選項。你不會破壞任何東西–我保證（你的所有改動在重新載入頁面後會被刪除）。
隱藏/編輯/刪除/複製給定元素
當你想快速預覽頁面上的一些變化時，你可以使用Chrome DevTools在頁面上直接修改元素。只要選擇你感興趣的節點，並在元素標籤中右鍵點選它，或者在有該元素的行中點選開頭的3點選單。之後，你會看到一個有許多選項的選單，例如，隱藏/編輯/刪除或複製一個給定的元素，新增一個屬性，作為HTML編輯，等等。選擇你感興趣的選項，並看到頁面上的視覺變化。
重要提示：這只是一個預覽，你的改變在重新載入頁面後不會被儲存。
改變元素的樣式
這是我最喜歡的選項之一–預覽元素的樣式變化。你不必在本地進行修改，也不必在每次改變一個屬性時等待重新載入頁面。或者你可以預覽你無法訪問的頁面會是什麼樣子，例如，不同的字型顏色。就像我在前幾節中描述的那樣，選擇給定的節點，並檢視靠近HTML樹的樣式標籤。在第一個檢視中，你可以看到應用於該元素的所有CSS類，你可以改變它們的值（只需雙擊該值），新增新的屬性等。你也可以取消靠近屬性的覈取方塊來禁用給定的規則。當某些規則被劃掉時，意味著一些其他屬性覆蓋了它。
在可能的情況下，自動建議將為給定的屬性提供可用的值（有時會有關於它們的含義的視覺提示），所以當你不記得屬性值的確切名稱時，這是一個找到例如正確選項的簡單方法！
在最近的一個版本中，Chrome還增加了一些資訊，即當某些規則不能應用於某個特定元素時。你可以通過灰色的字母和靠近數值的’i’圖示來識別它。當你將滑鼠懸停在 “i” 圖示上時，你會看到一個彈出視窗，解釋為什麼不能應用某個特定的規則。
重要提示：請記住，這些變化不會被儲存，在重新載入頁面後會被刪除！這裡有很多很多其他可用於造型的選項（所以強烈建議你只是玩玩），但我希望你再關注一件事–在靠近 “樣式 “標籤的地方還有 “計算 “標籤。你可以用它來輕鬆地預覽應用於元素的所有規則，而不用把它們拆分成CSS類。
切換元素狀態
有時，頁面上的元素因其狀態不同而顯得不同–例如，已訪問的連結與未訪問的連結看起來不同，按鈕在滑鼠懸停時可能有不同的背景色，等等。幸運的是，你也可以輕鬆地玩弄不同元素狀態的造型。只要選擇給定的節點，在 “樣式 “選項卡中找到:hov按鈕，然後撥動你想強制執行的狀態上的覈取方塊。這樣，即使你停止在元素上懸停，你仍然可以預覽和編輯應用於這個狀態的樣式。
重新排列頁面上的元素
有時你可能想在你的網頁上重新排列元素，但你不確定哪個順序是最好的。幸運的是，你可以輕鬆地進行預覽! 只需在Chrome DevTools的Elements選項卡中選擇你想移動的元素，拖動它，並將它放到正確的位置。就可以了! 新的順序將在使用者介面中可見，直到你重新載入頁面。
預覽移動端/響應式模式
現代網頁開發並不容易–我們必須確保我們的網頁不僅在膝上型電腦上看起來不錯，而且在手機、平板電腦、大螢幕等裝置上也是如此。而Chrome DevTools在檢查我們的網頁的響應性時也可能是有用的。只要點選靠近選擇器圖示的移動預覽按鈕（頂部選單中從左邊開始的第二個圖示），然後在頁面預覽上方的選單中選擇裝置、寬度、高度和裝置方向。玩不同的尺寸–由於這一點，你可以注意到你的網頁在不同裝置上的行為的一些問題！Pixel 5手機上的網頁預覽。注意啟用響應模式的圖示–它以藍色標記，下面有一個工具提示。
小結
當然，本文所描述的選項並不是Chrome DevTools中唯一可用的選項–你可能會驚訝於這裡有這麼多了不起的功能（我在預覽文章中寫了一些不太為人所知的功能）。請自由地嘗試和玩一下這個工具–我相信它將幫助你更好地理解和更容易地除錯你的專案。
評論留言