美文网首页
[Chrome]玩转Chrome之一

[Chrome]玩转Chrome之一

作者: Franckisses | 来源:发表于2019-01-19 16:37 被阅读63次

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

    本文集的对象!

        那么如何打开谷歌浏览器的开发者模式呢?摁下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 可以一目了然的查看当前页面是否安全
    剩下的一半都不怎么常用。

    相关文章

      网友评论

          本文标题:[Chrome]玩转Chrome之一

          本文链接:https://www.haomeiwen.com/subject/lfkzdqtx.html