[Chrome]玩转Chrome之一

2019-01-19  本文已影响63人  Franckisses

    很多开发者都习惯使用谷歌浏览器,因为它有比较好用而且很强大的开发者模式。

本文集的对象!

    那么如何打开谷歌浏览器的开发者模式呢?摁下F12就可以啦。

百度首页

    在图中我们可以看到最上面的一排有很多个选项。下面我们一一介绍一下他们的用法。

图例

按照顺序我们开始介绍它的用法:
    1.主要功能是用来寻找元素的源码。单击1,我们可以在上面的页面中自由选择元素。找到你想获取的元素之后。单击,会在下面的源码去,直接选中我们单击的元素所编码的代码。这样可以就可以很快的找到元素的源码。

    2.通过不同设备显示网站的效果。主要来看设备的兼容性的。单击2.我们可以看到以下图片。通过图片我们可以看到红色箭头可以用来选择不同的设备。再往右可以显示在不同设备上的显示的比例。

效果图

    3.elements。主要功能来显示网站的源码。我们可以通过elements来查看网站的源码是。
    4.console,也叫控制台。浏览器的终端。作为编程人员会在此进行调试。
    5.source该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码,此外最重要的是可以调试JavaScript源代码,可以给JS代码添加断点等。
    6.network.主要用来查看网站的请求的过程。如果做爬虫的话,你必须对这一块比较熟悉。
    7.performance:performance面板可以记录和分析页面在运行时的所有活动。
    8.在此面板录制,可以使用CPU 分析器识别开销大的js函数。
    9.application:查看和修改Local Storage与Session Storage
    10.security:使用 Security Overview 可以一目了然的查看当前页面是否安全
剩下的一半都不怎么常用。

上一篇下一篇

猜你喜欢

热点阅读