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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這是此類錯(cuò)誤的示例：

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

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

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

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

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

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

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

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