很多开发者都习惯使用谷歌浏览器,因为它有比较好用而且很强大的开发者模式。
本文集的对象!那么如何打开谷歌浏览器的开发者模式呢?摁下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 可以一目了然的查看当前页面是否安全
剩下的一半都不怎么常用。
网友评论