Chrome 開發者工具的 11 個高級使用技巧

文作者從開發者角度出發，介紹了幾個關于 Chrome 開發者工具的高級用法。熟練使用這些高級用法可以大大地提高你的生產力。如果你選擇 Chrome 作為開發環境，那么你應該知道下面關于它的 11 個使用技巧。

圖片來源 Morning Brewon，Unsplash

好了，現在由于某種原因，你最終選擇了 Chrome 瀏覽器作為開發及調試的環境。接下來，打開開發者工具并開始調試代碼。

很多時候你可以打開“控制臺”面板來檢查程序的輸出，或者打開“元素”面板來檢查 DOM 元素的 CSS 代碼。

但是你真的了解 Chrome 開發者工具嗎？實際上，它提供了許多強大但很多人未知的功能，可以極大地提高我們的開發效率。

在這里，我將介紹幾個最有用的功能，希望能對你有所幫助。

在開始之前，我想介紹一下 Chrome 的命令菜單。命令菜單之于 Chrome，就像 Shell 之于 Linux 一樣。你可以在鍵盤敲入相應命令來操作 Chrome。

首先，我們打開 Chrome 開發者工具，然后使用以下快捷鍵打開命令菜單：

windows：Ctrl + Shift + P
macOS：Cmd + Shift + P

或者我們可以按照下圖所示的步驟將其打開：

然后，我們可以轉到“命令”面板，在這里我們可以輸入一些命令來執行很多強大的功能。

1. 強大的屏幕截圖

捕獲屏幕內容是一個非常常見的功能需求，當然我非常確定在你當前的計算機上已經有了非常方便的截圖工具了。但是，你可以完成以下任務嗎？

截取網頁上所有內容的屏幕快照，包括可視窗口中未顯示的所有內容。
精確捕獲 DOM 元素的內容。

這是兩個很普通的要求，但是使用操作系統隨附的屏幕截圖工具不太容易解決。這個時候，我們可以在 Chrome 使用相關命令來幫助我們完成此要求。

上面兩個需求的對應的命令是：

Screenshot Capture full size screenshot
Screenshot Capture node screenshot

舉個例子

現在可以打開任意的網頁，例如，Medium 上 JavaScript 的熱門文章頁面。

https://medium.com/tag/javascript

打開“命令”菜單并執行Screenshot Capture full size screenshot。

然后，我們可以就獲得當前頁面的完整屏幕截圖了。

上面的原始圖像實際上非常清晰，只是在這里我上傳了壓縮圖像以節省你的流量。

同樣地，如果要截取某個 DOM 元素的屏幕截圖，就完全可以使用系統自帶的屏幕截圖工具，但當窗口不能完全捕獲該元素內容時，此時，你可以使用Capture node screenshot命令。

首先，我們在“元素”面板中選擇一個元素，然后運行Capture node screenshot命令，如下圖所示。

下面是準確的屏幕截圖的結果：

2. 在控制臺中引用上一次的執行結果

我們常常需要在控制臺中調試代碼。比如你想知道如何在 JavaScript 中反轉字符串，然后你在網絡上搜索相關信息并找到以下代可行代碼。

'abcde'.split('').reverse().join('')

沒問題，上面的代碼確實對字符串進行了翻轉。但你還想了解 split()、reverse()、join() 這些方法的作用以及運行他們的中間步驟的結果。因此，現在你想逐步執行上述代碼，可能會編寫如下內容：

好了，經過上面這些操作，我們確實知道了每個方法運行的返回值，也就了解了各個方法的作用。

但是，這給人的感覺有點多此一舉。上面的做法既容易出錯，又難以理解。實際上，在控制臺中，我們可以使用魔術變量$_引用上一次操作的結果。

$_是一個特殊變量，它的值始終等于控制臺中上一次操作的執行結果。它可以讓你更加優雅地調試代碼。

3. 重新發送 XHR 請求

XHR，即 XMLHttpRequest，是一種創建 AJAX 請求的 JavaScript API 。

在我們的前端項目中，我們經常需要使用 XHR 向后端發出請求來獲取數據。如果你想重新發送 XHR 請求，那么該怎么辦呢？

對于新手來說，可能會選擇刷新頁面，但這可能比較麻煩。實際上，我們可以直接在“網絡”面板中進行調試。

打開“網絡”面板
單擊 XHR 按鈕
選擇要重新發送的 XHR 請求
重放 XHR 請求

下面是一個 gif 示例，方便你理解：

4. 監控頁面加載狀態

從一開始完全加載頁面可能需要十秒鐘以上的時間。我們有時需要監控頁面在不同的時間點相關資源的加載行為。

在 Chrome 開發者工具中，我們可以使用“網絡”面板下的Capture Screenshots功能來捕獲頁面加載時的屏幕截圖。

單擊每個屏幕截圖可以顯示相應的當前時間的網絡請求狀態。這種可視化的演示會讓你更好地了解網絡請求的詳細過程。

5. 復制變量

你可以將 JavaScript 變量的值復制到其他地方嗎？

這似乎是不可能完成的任務，但是在 Chrome 瀏覽器中，有一個名為copy的函數可以幫助你實現這個功能。

該copy函數不是由 ECMAScript 定義的，而是由 Chrome 瀏覽器提供的。使用此功能，你可以將 JavaScript 變量的值復制到你的剪貼板中，方便在其他位置使用。

6. 將復制圖像為 Data URI

處理網頁上的圖像的通常有兩種方法，一種是通過外部資源鏈接加載它們，另一種是將圖像編碼為 Data URI。

Data URL，即前綴為data:協議的 URL，允許內容創建者在文檔中嵌入小文件。在被 WHATWG 撤消該名稱之前，它們被稱為“Data URI”。

將這些小圖像編碼到 Data URL 并將它們直接嵌入到我們的代碼中，可以減少頁面需要發出的 HTTP 請求的數量，從而加快頁面加載速度。

所以在 Chrome 瀏覽器中，我們該如何將圖像轉換為 Data URL 呢？可以參考下面的 gif 圖像：

7. 表對象數組

假設我們有一個下面這樣的數組對象：

let users=[{name: 'Jon', age: 22},
  {name: 'bitfish', age: 30},
  {name: 'Alice', age: 33}]

這樣的數組在控制臺中不容易查看閱讀。如果數組更長，元素內容很復雜，那么該數據將變得更加難以理解。

幸運的是，Chrome 提供了表格展示功能，可以將數組對象進行列表展示，方便理解。

在很多情況下，該功能非常好用。

8. 在“元素”面板對 DOM 元素進行拖放

有時我們想調整頁面上某些 DOM 元素的位置以測試 UI。在“元素”面板中，你可以拖放任何 HTML 元素來更改其在頁面中的顯示位置：

上面的展示中，在“元素”面板中將某個 div 的位置拖動到其他位置，它在網頁上的展示位置就會同步更改。

9. 在控制臺中引用當前選定的 DOM 元素

>$0是另一個魔術變量，它會引用“元素”面板中當前選定的 DOM 元素。<是另一個魔術變量，它會引用“元素”面板中當前選定的 dom="">

10. CSS 樣式觸發

CSS 偽類不僅可以讓你將樣式應用于文檔樹內容，還可以將其應用于外部元素，例如導航器的歷史記錄（例如:visited），其內容的狀態（例如某些表單元素的:checked），或鼠標的位置（例如:hover，它可以讓你知道當前鼠標是否在某個元素內容之上）。

我們可能為一個元素編寫多個 CSS 偽類，并且為了方便我們對這些樣式進行測試，我們可以直接在“元素”面板中選擇觸發或關閉這些樣式。

舉個例子

下面有一個測試網頁：

我們在瀏覽器中將其打開，然后通過“元素”面板對 CSS 樣式進行調試。

隱藏元素的快捷方式

在調試 CSS 樣式時，我們通常需要隱藏一個元素。如果選擇元素并按下鍵盤上的H鍵，我們就可以快速隱藏該元素。

此操作實際上增加了visibility: hidden !important;樣式到對應的元素上面。

11. 將 DOM 元素存儲在全局臨時變量中

如果要想在控制臺中快速獲取某個 DOM 元素的引用，可以執行以下操作：

選擇某個元素
右鍵點擊鼠標
存儲為全局變量

以上就是我想要介紹的 Chrome 開發者工具的高級用法，希望可以幫助到你。

作者介紹：

bitfish，Medium 平臺社區編輯，愛好閱讀、寫作和編程。

原文鏈接：

https://medium.com/javascript-in-plain-english/use-chrome-devtools-like-a-senior-frontend-developer-99a4740674

節我們來學習如何使用 jQuery 中的方法來實現元素的顯示與隱藏效。

hide()方法

hide() 方法用于隱藏指定的元素，與 CSS 中的 display:none 效果類似。

語法如下所示：

$(selector).hide(speed,easing,callback)

speed：可選，規定隱藏效果的速度。可選值為 slow、fast、毫秒。
easing：可選，規定在動畫的不同點上元素的速度，可選值為 swing、linear。
callback：可選，hide() 方法執行完之后，要執行的函數。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
     $("button").click(function(){
      $(".fruit").hide('slow','linear');
     });
  });
</script>
</head>
<body>
  <div>
    <button>隱藏下面內容</button>
    <div class="fruit"> 
      <p>我喜歡的水果：</p>
      <ul>
        <li>西瓜</li>
        <li>蘋果</li>
        <li>香蕉</li>
        <li>桃子</li>
        <li>哈密瓜</li>
      </ul>
    </div>
  </div>
</body>
</html>

在瀏覽器中的演示效果：

show()方法

show() 方法用于顯示隱藏的指定元素。與 CSS 中 display:none 的效果類似。

語法如下所示：

$(selector).show(speed,easing,callback)

show() 方法中的參數和 hide() 方法中參數類似。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
     $(".hide").click(function(){
      $(".fruit").hide('slow','linear');
     });
     $(".show").click(function(){
      $(".fruit").show('slow','linear');
     });
  });
</script>
</head>
<body>
  <div>
    <button class="hide">隱藏下面內容</button>
    <button class="show">顯示下面內容</button>
    <div class="fruit"> 
      <p>我喜歡的水果：</p>
      <ul>
        <li>西瓜</li>
        <li>蘋果</li>
        <li>香蕉</li>
        <li>桃子</li>
        <li>哈密瓜</li>
      </ul>
    </div>
  </div>
</body>
</html>

在瀏覽器中的演示效果：

toggle()方法

上面示例中我們在實現顯示和隱藏效果時，需要使用兩個按鈕分別控制。那么有沒有辦法只通過一個按鈕就可以實現顯示和隱藏效果呢。這就需要用到 toggle() 方法了，toggle() 方法可以用于切換 hide() 和 show() 方法。

語法如下所示：

$(selector).toggle(speed,callback,switch)

speed：可選，規定元素從可見到隱藏的速度，可選值又slow、normal、fast、毫秒。
callback：可選，toggle 函數執行完之后，要執行的函數。
switch：可選，規定 toggle 是否隱藏或顯示所有被選元素。True 表示顯示所有元素，False 表示隱藏所有元素。如果設置此參數，則無法使用 speed 和 callback 參數。

示例：

例如實現上述示例效果，我們只需要像下面這樣寫即可，主要是修改 jQuery 代碼部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $(".toggle").click(function(){
      $(".fruit").toggle(1000);
    });
  });
</script>
</head>
<body>
  <div>
    <button class="toggle">切換顯示與隱藏</button>
    <div class="fruit"> 
      <p>我喜歡的水果：</p>
      <ul>
        <li>西瓜</li>
        <li>蘋果</li>
        <li>香蕉</li>
        <li>桃子</li>
        <li>哈密瓜</li>
      </ul>
    </div>
  </div>
</body>
</html>

在瀏覽器中的演示效果：

我們來看一下區別，使用 show() 和 hide() 方法需要的代碼：

$(function(){
     $(".hide").click(function(){
      $(".fruit").hide('slow','linear');
     });
     $(".show").click(function(){
      $(".fruit").show('slow','linear');
     });
  });

使用 toggle() 方法需要的代碼：

$(function(){
    $(".toggle").click(function(){
      $(".fruit").toggle(1000);
    });
});

所以很明顯，在需要實現隱藏和顯示兩種效果相互切換時，使用 toggle() 方法是很方便的。

鏈接：https://www.9xkd.com/

賬號為華為云開發者社區官方運營賬號，提供全面深入的云計算前景分析、豐富的技術干貨、程序樣例，分享華為云前沿資訊動態

本文分享自華為云社區《jQuery框架實現元素顯示及隱藏動畫【附案例分析】》，原文作者：灰小猿。

首先來看一個簡單的動畫效果圖：

我之前也和小伙伴們講過使用 jQuery 框架可以很好的對 html 中元素的屬性等進行操作，所以上面顯示和隱藏的也只是一個 div，而并不是一個圖片。下面我就來和小伙伴們講一個如何對元素的屬性進行操作，使其顯示或者隱藏！

在 jQuery 框架中對元素對象進行顯示和隱藏有三種方式，分別是“默認方式顯示和隱藏”、“滑動方式顯示和隱藏”、“淡入淡出顯示和隱藏”。接下來我們就分別對這三種方法進行介紹。

一、默認方式顯示和隱藏

在默認方法下顯示元素的方法是

show([speed,[easing],[fn]])

其中的參數含義為：

speed：動畫的速度。三個預定義的值("slow","normal","fast")或表示動畫時長的毫秒數值(如：1000)
easing：用來指定切換效果，默認是"swing"，可用參數"linear"。* swing：動畫執行時效果是先慢，中間快，最后又慢。* linear：動畫執行時速度是勻速的
fn：在動畫完成時執行的函數，每個元素執行一次。

同時在這里提醒一點就是，以上的三個參數是可有可無的，如果不對其進行設置，那么將以默認值執行。

如下實例代碼：

// 顯示div
 $("#showDiv").show("slow","swing");
 linear 勻速

在默認方式下實現元素隱藏的方法是

hide([speed,[easing],[fn]])

其中的參數含義和 show 方法中的一樣。同樣也是三個參數是可有可無的，如果不對其進行設置，那么將以默認值執行。在這里我們增加一個最后的執行函數，讓其彈出一個窗口“隱藏了...”。

如下實例代碼：

// 隱藏div
$("#showDiv").hide("slow","swing",function () {
    alert("隱藏了...")
});

那么難道我們每次都要定義一個方法用于元素顯示，再定義一個方法用于元素隱藏嗎？并不是的，jQuery 中也充分的考慮到了這一點，所以在有一個既能實現顯示又能實現隱藏的方法

toggle([speed],[easing],[fn])

當調用該方法的時候，元素就會被隱藏掉，類似于 hide()方法，當再次調用時，元素又會被顯示出來，類似于 show()方法。

其中的參數含義和上面一樣

實例代碼如下：

// 能顯示能隱藏
 $("#showDiv").toggle("slow","linear");

?默認方式下實現效果如圖：

二、滑動方式顯示和隱藏

從名字上我們應該也能區分出，滑動方式和默認方式的不同之處其實就是顯示和隱藏時的動畫不一樣罷了，下面我們就來介紹一下在滑動方式下進行元素的顯示、隱藏、既顯示又隱藏，

滑動方式下顯示

slideDown([speed],[easing],[fn])

實例代碼：

// 滑動顯示div
$("#showDiv").slideDown("slow");

滑動方式下隱藏

slideUp([speed,[easing],[fn]])

實例代碼：

// 滑動隱藏div
$("#showDiv").slideUp("fetch");

滑動方式下既顯示又隱藏：

slideToggle([speed],[easing],[fn])

實例代碼：

// 滑動能顯示能隱藏
$("#showDiv").slideToggle("slow");

滑動方式下實現效果如圖：

三、淡入淡出方式顯示和隱藏

淡入淡出方式下進行元素的顯示和隱藏其實和上面兩種方法一樣的，不同的也只是顯示的效果不一樣罷了，

淡入淡出方式下顯示使用的方法是：

fadeIn([speed],[easing],[fn])

實現代碼：

// 淡出顯示div
$("#showDiv").fadeIn("slow")

淡入淡出方式下實現隱藏

fadeOut([speed],[easing],[fn])

實現代碼：

// 淡出隱藏div
$("#showDiv").fadeOut("fetch");

淡入淡出方式下既顯示又隱藏

fadeToggle([speed,[easing],[fn]])

實現代碼：

// 淡入淡出顯示和隱藏div
$("#showDiv").fadeToggle("fetch")

淡入淡出方式下運行的效果如下：

以上就是利用 jQuery 框架對元素進行顯示和隱藏的方法，下面是上面實例的完整實現代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>默認方式顯示和隱藏動畫</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    
    <script>
        function hideFn() {
            // 隱藏div
            /*$("#showDiv").hide("slow","swing",function () {
                alert("隱藏了...")
            });*/


            // 滑動隱藏div
            $("#showDiv").slideUp("fetch");


            // 淡出隱藏div
            // $("#showDiv").fadeOut("fetch");


        }
        
        function showFn() {
            // 顯示div
            // $("#showDiv").show("slow","swing");
            // linear 勻速


            // 滑動顯示div
            // $("#showDiv").slideDown("slow");


            // 淡出顯示div
            $("#showDiv").fadeIn("slow")
        }
        
        function toggleFn() {
            // 能顯示能隱藏
            // $("#showDiv").toggle("slow","linear");


            // 滑動能顯示能隱藏
            // $("#showDiv").slideToggle("slow");


            // 淡入淡出顯示和隱藏div
            $("#showDiv").fadeToggle("fetch")
        }
        
    </script>
    
</head>
<body>
<input type="button" value="點擊按鈕隱藏div" onclick="hideFn()">
<input type="button" value="點擊按鈕顯示div" onclick="showFn()">
<input type="button" value="點擊按鈕切換div顯示和隱藏" onclick="toggleFn()">


<div id="showDiv" style="width:300px;height:300px;background:pink">
    div顯示和隱藏
</div>
</body>
</html>

四、案例：廣告的自動顯示和隱藏

既然現在我們已經知道了 jQuery 框架下是如何進行元素的顯示和隱藏的，那么就應該將其應用到實際的案例中去，下面通過實現廣告的自動顯示和隱藏的案例，來對該技術進一步加強實踐。

我們要實現的是，在一個簡單的網頁中，頁面打開三秒后將廣告圖顯示出來，顯示五秒后再將廣告隱藏，這里對廣告圖片顯示和隱藏的操作，根據上面的講解，現在實現圖片的顯示和隱藏應該是很容易的了，那么到底應該如何實現延時顯示和隱藏呢？

這里就要用到 js 中的一個定時器 setTimeout(方法,時間);

該方法的第一個參數是一個方法名，如顯示或隱藏圖片的方法，第二個參數是毫秒數，表示頁面加載完成后多少秒執行該方法。

那么根據思路，我們就可以在 jQuery 的入口函數中寫入，頁面加載完成 3000 毫秒，也就是三秒后調用顯示圖片的方法；頁面加載完成 8000 毫秒，也就是八秒后調用隱藏圖片的方法，中間空余的五秒為顯示圖片的時間。

下面我們來講上述需求實現，完整代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>廣告的自動顯示與隱藏</title>
    <style>
        #content{width:100%;height:500px;background:#999}
    </style>


    <!--引入jquery-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        // 圖片延時顯示和隱藏的步驟
        // 1、在頁面加載完成之后調用定時器setTimeout()方法
        // 2、在定時器中調用顯示廣告和隱藏廣告的函數
        // 3、使用show和hide方法實現圖片的顯示和隱藏


        // 設置入口函數
        $(function () {
            // 延時3秒后顯示圖片
            setTimeout(adShow,3000);
            // 延時6秒后隱藏圖片
            setTimeout(adHide,8000);
        });
        // 顯示圖片
        function adShow() {
            $("#ad").show("slow");
        }


        // 隱藏圖片
        function adHide() {
            $("#ad").hide("fast");
        }


    </script>
</head>
<body>
<!-- 整體的DIV -->
<div>
    <!-- 廣告DIV -->
    <div id="ad" style="display: none;">
        <img style="width:100%" src="../img/adv.jpg" />
    </div>


    <!-- 下方正文部分 -->
    <div id="content">
        正文部分
    </div>
</div>
</body>
</html>

效果如下：

點擊關注，第一時間了解華為云新鮮技術~

在線咨詢

上一篇：13款鼠標劃過特效CSS3樣式源碼
下一篇：網站優化中提升權重的方法有哪些-

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Chrome 開發者工具的 11 個高級使用技巧

1. 強大的屏幕截圖

2. 在控制臺中引用上一次的執行結果

3. 重新發送 XHR 請求

4. 監控頁面加載狀態

5. 復制變量

6. 將復制圖像為 Data URI

7. 表對象數組

8. 在“元素”面板對 DOM 元素進行拖放

9. 在控制臺中引用當前選定的 DOM 元素

10. CSS 樣式觸發

舉個例子

隱藏元素的快捷方式

11. 將 DOM 元素存儲在全局臨時變量中

hide()方法

示例：

show()方法

示例：

toggle()方法

示例：

一、默認方式顯示和隱藏

二、滑動方式顯示和隱藏

三、淡入淡出方式顯示和隱藏

四、案例：廣告的自動顯示和隱藏

您的項目需求