非開發(fā)人員專用的Google Chrome DevTools

谷歌瀏覽器是其中使用最廣泛的瀏覽器之一，全球有將近65％的用戶。 這是有充分的理由的， 它運(yùn)作良好， 它支持大量的網(wǎng)絡(luò)功能， 與google提供的所有內(nèi)容進(jìn)行本地集成，并且易于使用。

但是，不僅限于用戶方面。 它也非常適合開發(fā)人員。 Firefox是另一種出色的瀏覽器，可提供出色的開發(fā)人員體驗(yàn)， 盡管它的用戶群相對較小。 因此， 我們專注于Chrome及其DevTools， 但幸運(yùn)的是， 大多數(shù)瀏覽器中的用戶界面仍然非常相似， 因此這里的提示可以很好地翻譯到Firefox， 蘋果瀏覽器， Edge和其他瀏覽器。

Chrome DevTools是一組直接內(nèi)置在Google Chrome瀏覽器中的網(wǎng)絡(luò)開發(fā)人員工具。 DevTools可以幫助您即時(shí)編輯頁面并快速診斷問題， 最終可以幫助您建立更好的網(wǎng)站， 快點(diǎn)。
Chrome DevTools文檔首頁

DevTools是大多數(shù)前端（通常是后端）開發(fā)人員用來檢查網(wǎng)頁效果的工具， 定義它的HTML標(biāo)簽以及以其最基本形式應(yīng)用的樣式。 它提供了許多其他超級有用的功能，只要它們也適用于非開發(fā)人員的一般用例，我們將對其進(jìn)行介紹。

開發(fā)工具 是您在上面的屏幕快照中看到的，左側(cè)是代碼，右側(cè)是各種屬性。 如果您按Command + Option + C（Mac）或Control + Shift + C（Windows， Linux， Chrome操作系統(tǒng)）。

DevTools提供了很多功能， 但最值得注意的是：

• 頁面加載后以及加載時(shí)生成的文檔結(jié)構(gòu)（HTML）。
• 什么CSS適用于特定的HTML元素以及從父元素繼承的元素。
  查看視口大小， 元素大小， 填充物 邊距 邊界等等。
• 除正在運(yùn)行的腳本外，還可以修改頁面上所有內(nèi)容的功能。
• 刷新頁面后對保存的代碼進(jìn)行更改（盡管默認(rèn)情況下是不可能的）
• 所有更改都是客戶端-意思是， 不管你改變什么 只有您會看到，直到刷新頁面。
• 無需高速緩存并模擬較慢的網(wǎng)絡(luò)速度即可進(jìn)行測試。
• 衡量效果和對網(wǎng)頁效果進(jìn)行評分的工具，并提供解決方法。
• 顯示頁面的控制臺及其錯誤， 警告和消息，以及在其中執(zhí)行javascript代碼的方法。

這是一個很短的清單， 但它涵蓋了一些更顯著的功能， 我們將主要介紹。

有關(guān)的：如何創(chuàng)建您的第一個Chrome擴(kuò)展程序

對于開發(fā)人員而言，顯而易見的是， 但是非開發(fā)人員呢？ 出色地， 有一些巧妙的竅門和技巧可以使您更接近高級用戶狀態(tài)。 網(wǎng)站所有者通常會在網(wǎng)站上發(fā)現(xiàn)問題， 問一個或兩個問題，有時(shí)會收到一小段代碼以“粘貼”以解決問題。 開發(fā)人員測試此類代碼片段的方法之一是直接將其應(yīng)用于開發(fā)工具。 這也是一種為開發(fā)人員提供有關(guān)外觀外觀的漂亮預(yù)覽的方法。

DevTools的第一個也是最常見的用法是修改和應(yīng)用CSS。 CSS是定義頁面外觀的方式， 這是美學(xué)。 去做這個， 您只需指向要樣式化的元素， 右鍵單擊并選擇“檢查”

大多數(shù)其他瀏覽器也是如此， 盡管菜單項(xiàng)的文本可能會略有不同。 完成后， 您將看到DevTools打開，并直接選擇所需的元素。 在那里， 您將看到開發(fā)工具的兩個主要部分。 HTML和CSS面（左右）：

在HTML部分找到自己的方式可能有點(diǎn)棘手， 不用擔(dān)心 當(dāng)您將元素懸停在左側(cè)面板上時(shí)，DevTools將突出顯示這些元素。 一旦找到需要的東西， 在右邊您可以編寫樣式。 已經(jīng)添加了一些。 因此，讓我們更改背景以閱讀并查看其外觀：

當(dāng)您輸入時(shí)， 頁面中的樣式將更新。 您可以在此處編寫任何CSS，它將按照頁面上已有的樣式進(jìn)行應(yīng)用。 如果您在規(guī)則結(jié)尾附近按（在“寬度”下）， 它將開始添加新樣式。 或者，您也可以在上面寫著“ element”的地方寫下它們。風(fēng)格”。 然后，如果您想與開發(fā)者共享， 您只需選擇代碼并復(fù)制粘貼即可。 專家提示， 也抓住樣式的“選擇器”。 這是“。上面的屏幕快照中的“ RNNXgb”。 這將告訴開發(fā)人員要在哪個元素上添加樣式。

有關(guān)的：WordPress CSS：初學(xué)者基本指南

您可以做的另一件整潔的事情是找出確切使用了什么顏色，以及直接從DevTools中使用顏色選擇器來查看其他顏色。 只需單擊顏色代碼旁邊的正方形（上面的箭頭指向的地方），它將打開一個顏色選擇器。

CSS開發(fā)人員還定義了使用的字體， 字體大小， 線高 顏色， 字體粗細(xì)和其他與排版有關(guān)的屬性。 所有這些都將顯示在右側(cè)。 只要沒有越過 您看到的樣式將被應(yīng)用。 讓我們找出在Google表單上進(jìn)行搜索所使用的字體。 右鍵點(diǎn)擊， 檢查并向下滾動，直到看到字體為止，或者只是在右側(cè)部分頂部上方的“過濾器”字段中進(jìn)行搜索：

如果您繼續(xù)更新字體， 您會看到使用其他字體的網(wǎng)站外觀， 您可能希望很快切換到的一種。 當(dāng)然， 開發(fā)人員以后將不得不修改代碼并解決字體更改可能造成的任何問題， 但是這種方法非常有用，可以在不設(shè)置任何開發(fā)環(huán)境的情況下快速測試事物。

設(shè)置為“喬治亞”字樣的Google主頁的外觀如下。 為了達(dá)成這個， 我們必須更新多個物業(yè) 但是多虧了Google開發(fā)人員的出色CSS架構(gòu)， 這很容易。 大多數(shù)時(shí)候， 一個寫得不好的網(wǎng)站需要您更新大量的屬性才能看到整個網(wǎng)站都已更新。

有關(guān)的：如何為您的網(wǎng)站選擇最佳字體

什么是緩存？ 簡單來說 保存在您的計(jì)算機(jī)上以備將來使用的資源。 資源可以是JS， CSS文件或圖像。 如果每次打開頁面都沒有改變， 不需要每次都下載對嗎？ 因此，瀏覽器只會將其在您的計(jì)算機(jī)上保留一段時(shí)間。

但是會發(fā)生什么 服務(wù)器上是否有更改，并且設(shè)置未使用最佳做法來更新資源？ 或簡而言之， 即使開發(fā)人員更改了代碼庫， 您仍然可以看到舊樣式。 出色地， 那么您就可以停止緩存并執(zhí)行“硬刷新”。

打開開發(fā)工具，然后導(dǎo)航到“網(wǎng)絡(luò)”選項(xiàng)卡。 然后單擊“禁用緩存”并執(zhí)行“硬刷新”：

現(xiàn)在， 在打開DevTools的情況下瀏覽頁面時(shí)， 您的瀏覽器將不會有任何緩存的資源。 由于每次都會加載資源，因此頁面加載速度會變慢， 但您會看到更改。 通常，開發(fā)人員默認(rèn)情況下默認(rèn)情況下將“禁用緩存”設(shè)置為“開”，并且僅在加載時(shí)間很重要時(shí)測試實(shí)際用戶交互時(shí)才禁用它。

刷新一次后，在同一選項(xiàng)卡上，您還將看到頁面速度和重量的度量值。 多久才觸發(fā)“加載”（附加其他腳本以執(zhí)行更多工作時(shí)發(fā)生的事件）， 請求了多少個文件（以上31個請求， 相當(dāng)不錯的金額）， 已下載了多少等等。 這很簡單， 每個值越低越好。 任何高于100-150的請求，您將開始看到較大的速度問題。

DevTools還提供了慢速連接的模擬。 一項(xiàng)非常有用的功能，可用來查看您的站點(diǎn)如何在速度較慢的網(wǎng)絡(luò)（如3G）上工作。 打開它， 只需更改“禁用緩存”旁邊的值，然后單擊刷新即可。 刷新后，您會看到網(wǎng)站加載的每個步驟。 在禁用緩存的情況下， 這將是常規(guī)使用的首次訪問。

與使用實(shí)際連接速度的第一個示例相比，選擇“慢速3G”并刷新時(shí)看到的速度差異。 在這里，您還可以測試“離線”-如果沒有任何互聯(lián)網(wǎng)連接，該站點(diǎn)將如何工作。 如果聽起來很奇怪， 它不是， 漸進(jìn)式Web應(yīng)用程序已經(jīng)允許訪問站點(diǎn)至少訪問一次的站點(diǎn)，即使沒有互聯(lián)網(wǎng)連接也可以正常運(yùn)行。

稽核 是另一個偉大的功能，可提供用戶友好的頁面速度分析。 您只需運(yùn)行“審計(jì)”選項(xiàng)卡并單擊“生成報(bào)告”即可運(yùn)行它：

在右側(cè)，您可以選擇一些選項(xiàng)來決定要測試的內(nèi)容，因?yàn)橛袝r(shí)測試可能需要一段時(shí)間（一兩分鐘）， 因此，如果您多次運(yùn)行它們， 您可能會選擇當(dāng)前測試所需的內(nèi)容。 以下是Google主屏幕帶有上述選項(xiàng)的示例結(jié)果：

好極了！ 94非常好，展示了此頁面上所做的出色工作。 請記住，表面上看起來可能非常簡單， 但是在后臺運(yùn)行的大量腳本仍處于隱藏狀態(tài)，從而降低了網(wǎng)站速度。 還測試了許多其他指標(biāo)，您可以在任何站點(diǎn)上執(zhí)行此操作，以查找存在的問題以及可以改進(jìn)的問題。

有關(guān)的：“加速網(wǎng)站”的真正含義是什么，以及如何實(shí)現(xiàn)？

我們將介紹的最后一個視圖是控制臺。 只需按ESC鍵或轉(zhuǎn)到“控制臺”選項(xiàng)卡即可輕松訪問。 不出所料 沒有錯誤， 只是一些不應(yīng)該引起太多問題的警告：

但， 如果出于某種原因在您網(wǎng)站上最近更新之后， 互動組件（例如下拉菜單， 菜單， 地圖， 表格）停止工作， 您可以隨時(shí)查看控制臺。 它可能有錯誤，說明原因是什么。

這是此類錯誤的示例：

使用錯誤日志文檔頁面展示錯誤有點(diǎn)諷刺意味， 正確的？ 在任何情況下， 它有一個很好的目的。 這些錯誤會使某些功能無法正常工作。 您始終可以與開發(fā)人員共享此類信息并尋求幫助。 與頁面互動時(shí)，日志會實(shí)時(shí)發(fā)布， 因此，如果您單擊按鈕并彈出錯誤， 它背后的腳本很可能有問題。

有關(guān)的：成為優(yōu)秀的Web設(shè)計(jì)者的途徑

安全須知注意：在不了解代碼功能的情況下將代碼復(fù)制粘貼到控制臺不是一個好主意。 特別是如果它來自不可靠的來源，并在公司的內(nèi)部應(yīng)用程序/網(wǎng)站上使用。 因此，F(xiàn)acebook在其控制臺上發(fā)布了警告：

DevTools是一個了不起的工具，可為開發(fā)人員和網(wǎng)站所有者提供幫助。 它為您提供了調(diào)整和修改頁面所需的一切。 通過它，您可以更改CSS， 修改HTML， 刪除并重新排列頁面上的元素， 查看速度報(bào)告和報(bào)告的錯誤。

網(wǎng)站所有者可以使用它向開發(fā)人員展示想法和他們的需求示例，這些想法和示例可能比編寫文本段落更容易理解。 掌握了一些CSS的基本屬性后， 您可以更加描述您的需求， 這將大大減少來回更改的時(shí)間和時(shí)間。

還有許多其他功能需要使用， 不要害怕探索！

長期發(fā)展， 支持， 和您的WordPress平臺的創(chuàng)新。 DevriX為中小型企業(yè)和快節(jié)奏的初創(chuàng)企業(yè)提供技術(shù)合作伙伴關(guān)系。 我們構(gòu)建WordPress解決方案并擴(kuò)展平臺，最多可生成20個，000，每月000次網(wǎng)頁瀏覽。

DevriX的創(chuàng)意主管和前端開發(fā)人員
亞歷克斯（Alex）的熱情在于學(xué)習(xí)新的網(wǎng)絡(luò)技術(shù)， 探索創(chuàng)新的方法來優(yōu)化網(wǎng)站性能并改善用戶體驗(yàn)。 亞歷克斯（Alex）喜歡騎自行車和數(shù)字藝術(shù)，最近開始在ELSYS技術(shù)學(xué)校教授設(shè)計(jì)。