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()方法

示例：

一、默认方式显示和隐藏

二、滑动方式显示和隐藏

三、淡入淡出方式显示和隐藏

四、案例：广告的自动显示和隐藏

您的项目需求