【干货】【建议收藏】chrome开发者工具最常见的使用方式

我相信 chrome 是每个前端开发者最常使用的浏览器了，而它为我们提供的 chrome 开发者工具其实是一个巨大的宝藏。今天我们就来解锁一下 chrome 开发者工具的各种常见的使用方式。首先先把 chrome 的官方文档放出来镇楼：chrome开发者工具

如果下面介绍的一些选项你无法找到，都可以在 more tools 中找到

PS：本文首先会为大家介绍开发工具最基本的使用方式，然后介绍一些基本模块的使用方法，最后会为大家介绍开发过程中常用的断点调试

打开方式

windows 下打开开发者工具的快捷键是 F12 ，mac 下打开开发者工具的快捷键是 command + option + I

快捷键无效的小伙伴也可以通过下面的方式打开开发者工具

调整展示方式

打开开发者工具之后我们可以改变它的默认展示方式，在 左边/下面/右边 或者使用单独页面进行展示。

模拟手机展示

chrome 能够支持我们在电脑上模拟手机的效果，点击下图中用蓝色方框框出的图标

点击之后如下图所示

通过 1⃣️ 我们可以选择手机的型号

通过 2⃣️ 我们可以改变手机的网络状况

通过 3⃣️ 我们可以让手机横屏或者竖屏

通过 4⃣️ 可以选择是否展示手机的外壳

Elements

在 Elements 界面我们能够看到网页的各种 HTML 元素

点击 1⃣️ 处的小图标，我们能够用它来查看页面上的各种元素，选取元素之后会在 2⃣️ 处显示它的 CSS 信息。

在 2⃣️ 处的信息里，CSS 样式根据优先级从上往下排列，同时用不同的标识标注出了该样式的来源。放在最后的是该元素从父元素继承而来的值。

在页面的最下方是我们最常用的盒子模型，展示了 div 的 padding，border，margin 等信息。

Console