为什么选择Chrome开发者工具作为设计师

Habré上有几篇文章介绍了Chrome Dev Tools的有用功能,但让我们以想要测试其布局的最终​​布局的设计师的优势来完成此列表。

查看自适应

这是最有用和最著名的功能,但是我不能不提及它。您只需将浏览器切换到移动模式,即可检查前端如何呈现手机的布局。流行的移动设备有预定义的大小,您可以设置自己的大小。

, . Edit .

, , - . , . . . , . Dev tools . , , . Animations , , , ( 25%). , — (opacity) (filter). ( Principle). .

, . , Sources, . , , .

— . - , , 3G. Dev Tools Network , , .

. , Contrast. , , . Dev tools , (WCAG). : — ; — ; — . Dev tools , . — .

. . . , (H, p, span, a .). . - ( ).

, . , Dev tools. Lighthouse Generate report . — -, SEO, .

, . .

- , . , VPN-, , - ; - , ; - , . Dev tools . , " " . , . , : 59.898092; 30.307113.

但是,要使此功能起作用,您需要允许该网站跟踪您的位置。奇怪的是,此功能使Google Maps有点破了。这就是为什么在示例中显示Yandex Maps的原因。在Google中,启用此功能后,地图上的“我的位置”按钮就消失了。

如果默认情况下没有面板供您选择,请打开开发工具,按Command + Shift + P,将打开一个搜索框,在其中输入Sensors




All Articles