浏览器f12的调试介绍

作者：roben
链接： https://www.zhihu.com/question/27414902/answer/37315077
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

好多赞，谢谢大家关注，暂时就写这么多吧，再写就跑题了，如果是做WEB开发或者前端的，重点多了解下Source和Console调试JS，真的很好用。

看了些其它回答，有些是用来扒图片的，有些是写爬虫的（这个不要看Elements，因为浏览器会对一些不符合规范的标签做补全或者其它处理，最好是Ctrl+U）。

图片的话就不要看Network了，一个页面图片太多了，我们可以点击网页上的图片然后右键-》审查元素，然后Elements会定位到一个<img />标签，那个src属性就是你要的图片地址了，有的网页会把右键禁掉了，下面有介绍打开Chrome DevTools的方法，用“放大镜”定位图片元素。

就这样吧，大家干巴爹

=================================原文=================================

虽然不是做前端开发的，但是对Chrome DevTools还是用的比较熟的。

自从知道F12以后，每次浏览网页的时候看到什么特别炫的效果或者功能，总是忍不住按F12，然后开始研究一番，这真是一种病。下面我们用知乎网来做些演示。

这个东西是前端开发人员的利器啊，要认真写的话，写一天也写不完，先随便写一点吧，有时间再更新。

1. Elements 查看当前文档的DOM信息
   
2. Network 查看网络请求的
   
3. Source 查看当前资源文件的（CSS,JS,IMAGE）
   
4. Resources 查看本地资源信息的（cookie,local storage,session storage等）
   
5. Console 查看调试用的，也可以直接写JS代码
   

其它我不怎么用，没有研究过^-^

Elements
题主看到的是用来模拟移动设备的一个功能，这样就不用手机浏览器打开来看了。下面这个图片是用来模拟nexus 5的，
&amp;amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/0d48923d5d1a679d869eae6ecbbcf4ad.png&quot; data-rawwidth=&quot;1332&quot; data-rawheight=&quot;846&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;1332&quot; data-original=&quot;https://pic3.zhimg.com/082a57dbff281674a5db1c29df105d2e_r.jpg&quot;&amp;amp;gt;

最左面那个放大镜是用来 定位DOM元素的，你可以试下，选择你要查看的网页内容，点击一下，看Elements选项卡，那里应该定位到你点击的那个元素了。这个比较常用 。&amp;amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/fc1a22392b6144590165c6ba20d76c5b.png&quot; data-rawwidth=&quot;1320&quot; data-rawheight=&quot;834&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;1320&quot; data-original=&quot;https://pic1.zhimg.com/0bd26790c7254f909353259467835688_r.jpg&quot;&amp;amp;gt;
右边是当前选中的DOM元素的一些CSS样式信息，可以直接编辑，在网页上看到效果，移到某个具体的CSS样式上，会出现一个复选框，可以点击启用或禁用该样式。下面这个是禁用知乎导航栏的背景色
&amp;amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/07e0809c36b872689fb812ebba691f87.png&quot; data-rawwidth=&quot;1748&quot; data-rawheight=&quot;663&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;1748&quot; data-original=&quot;https://pic3.zhimg.com/2ff4e5963a7995d932337e5ff0d532ea_r.jpg&quot;&amp;amp;gt;



Network
接下来看下network，这个主要是用来查看当前的网页的一些网络请求（CSS,JS,image，ajax，Document等），
这里有基本的请求信息：
URL，请求方法，响应状态码，响应数据类型，响应数据大小，响应时间和每个阶段所花费的时间。
&amp;amp;lt;img data-rawheight=&quot;230&quot; data-rawwidth=&quot;1571&quot; src=&quot;https://i-blog.csdnimg.cn/blog_migrate/4f05ef9f50bc51f5690d7e18a0261337.png&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;1571&quot; data-original=&quot;https://pic1.zhimg.com/031346490fce87c4975bdc32bb4b5cb0_r.jpg&quot;&amp;amp;gt;

用的比较多的估计就是XHR了，点击具体的请求，可以看到当前请求的信息和服务器响应的信息，这个很好用
&amp;amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/76f1149034aa2d3308e7a324ad1ceb81.png&quot; data-rawwidth=&quot;1342&quot; data-rawheight=&quot;717&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;1342&quot; data-original=&quot;https://pic2.zhimg.com/1f9d335c0c71fe359d12b303aaaf7fdd_r.jpg&quot;&amp;amp;gt;
下面这个图我们可以知道知乎的实时消息实现用WebSocket实现的&amp;amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/18f051bcf1eccc1a453c8572714c3a10.png&quot; data-rawwidth=&quot;1557&quot; data-rawheight=&quot;520&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;1557&quot; data-original=&quot;https://pic2.zhimg.com/ce392b8cffdd8866ce4282130252d265_r.jpg&quot;&amp;amp;gt;


如果Chrome的Network能像Firefox Dev版一样，可以直接编辑信息重发就更好了 ^-^。
&amp;amp;lt;img data-rawheight=&quot;615&quot; data-rawwidth=&quot;1596&quot; src=&quot;https://i-blog.csdnimg.cn/blog_migrate/9fcf1af04fdf6b43d63bf81b18138ad1.png&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;1596&quot; data-original=&quot;https://pic4.zhimg.com/708707a1698b176af196528c8c8b58b3_r.jpg&quot;&amp;amp;gt;
&amp;amp;lt;img data-rawheight=&quot;529&quot; data-rawwidth=&quot;608&quot; src=&quot;https://i-blog.csdnimg.cn/blog_migrate/e3e118fe6d21fa919aedda39f877f089.png&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;608&quot; data-original=&quot;https://pic1.zhimg.com/be1243638b34c6c951e900ef799a3428_r.jpg&quot;&amp;amp;gt;

Source
Source估计是这里最好用的一个了。先看张图&amp;amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/a8474c4a6f8f8bd80d6447230f37c9f1.png&quot; data-rawwidth=&quot;1767&quot; data-rawheight=&quot;629&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;1767&quot; data-original=&quot;https://pic2.zhimg.com/6cdc096beaf0167d404f9008c1a9e5ed_r.jpg&quot;&amp;amp;gt;
这是知乎的一个JS文件，压缩过的，基本没有什么可读性，点左下角那对大括号（{ }），格式化一下这个JS文件，就会变成下面这样，可读性还是太差，但最起码调试的时候好点了，知道程序现在执行到哪一行了。&amp;amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/7a7dfe7b25a08442767a7e2c9076be7c.png&quot; data-rawwidth=&quot;1854&quot; data-rawheight=&quot;753&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;1854&quot; data-original=&quot;https://pic4.zhimg.com/602a0a1507ce0ee1973d01af9a17c6c3_r.jpg&quot;&amp;amp;gt;

好用吧^-^，然后再打一个断点，那么这整个网页就挂起来了，右边是当前作用域的一些变量信息，
调试有 F10,F11,F8,SHIFT+F11等快捷键，不要问怎么用，用下就知道了。
具体是：
F10，跳过当前方法（如果执行到一个自定义方法，不进入方法内部）
F11，进入当前方法（如果当前方法是一个自定义方法，进入方法内部）
SHIFT+F11 跳出当前方法
F8，跳到下一个断点
想当年不知道有Chrome，用肉眼和alert来在IE下调试JS，边流泪边调试......说多了都是泪。总之现在你可以非常方便的调试JS了。

Resource
resource主要是用来查看当前网页可以访问到的一些本地信息，比如：Cookie，LocalStorage，SessionStorage，DB等
下面这图是知乎的Cookie信息
&amp;amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/04f29301abe2c601ad6bb63b2c1e365a.png&quot; data-rawwidth=&quot;1628&quot; data-rawheight=&quot;384&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;1628&quot; data-original=&quot;https://pic2.zhimg.com/876d029324d39157f2d70012c291111d_r.jpg&quot;&amp;amp;gt;

Console
最后Console，这个主要是显示JS文件里面打印的日志信息(console对象)。你也可以直接在里面写JS，查看或修改当前作用域的变量信息，配合Source的调试用，非常爽。
如果是当前作用域内的对象（包含全局对象）的话，console还会自动帮你补全，有的时候我会忘记某个对象有什么方法，经常会用这个来看，或者console.dir(对象)看。
&amp;amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/13c4f4c6ed00d21cad6c0e4e59144542.png&quot; data-rawwidth=&quot;859&quot; data-rawheight=&quot;625&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;859&quot; data-original=&quot;https://pic1.zhimg.com/9ae0b096047f8e5a0f7204eb1f1b9950_r.jpg&quot;&amp;amp;gt;数组对像（实例）的方法 数组对像（实例）的方法
&amp;amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/5e345f3af79e00efda8464cad20ded7f.png&quot; data-rawwidth=&quot;1019&quot; data-rawheight=&quot;561&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;1019&quot; data-original=&quot;https://pic1.zhimg.com/9b33abc4ee9215da16c8dbad73c505d8_r.jpg&quot;&amp;amp;gt;

先写这么多。WEB开发人员开发的神器，总之，有了这个，妈妈再也不用担心......

==================== 更新一些Console对象的吧=============================
Console对象的主要方法如下：
&amp;amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/32c8f516815cec881417dc550985d981.png&quot; data-rawwidth=&quot;630&quot; data-rawheight=&quot;561&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;630&quot; data-original=&quot;https://pic2.zhimg.com/19da0ff5a8fa0b58faf4fc7d26d6ded1_r.jpg&quot;&amp;amp;gt;
用法如下图：&amp;amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/ce5f6f2fcee1ecbd3856e572c8cda07e.png&quot; data-rawwidth=&quot;1915&quot; data-rawheight=&quot;530&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;1915&quot; data-original=&quot;https://pic2.zhimg.com/cbe3c4de711f22756d76a55df07c5871_r.jpg&quot;&amp;amp;gt;

日志的等级：debug，info，warn，error。
打印变量信息什么的，一般用log方法，相对于alert，这方法真是好。
alert会让浏览器挂起，如果alert的多了，还要一个个确定，最痛苦的时候，如果是一个对象，直接用alert打印的时候，直接是个object，要看具体某个属性的值还要写个循环，调试结束还特么要一个个删除，调试到哭的有没有。

console.log，不会挂起浏览器，在后台默默打印，对象会显示对象的具体信息，如果删除的话，点击log信息的右下角，直接定位到文件。

console.table打印数组对象（数组每一项是对象）信息非常好

console.time(tag)和console.timeEnd(tag)可以用来计start和end间花费的时间
console.dir(object) 打印对象的原型信息，很好用有没有。

还有其它一些没怎么用过的，大家可以自己去了解下。

下面内容请高手略过，写给普通用户看的。
=================================update================================
上面讲的一些主要针对开发者的，普通用户
也有些好用的东西，比如：

1. 有些网站没有注册的用户，老是弹出一些窗口，提示注册（我就看个信息还要注册，最讨厌这样的网站了，我偏不注册）
   
2. 有些网站把键盘的默认禁用了，想复制网站的东西复制不了

情况1：
以前经常碰到，现在本来想找个做演示的，但没有找到，下面就以百度登录为例吧（百度不登录的用户不会弹出登录窗口的）
&amp;amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/2dfe9ea0a09dad5e77e86c5c9d5922fc.png&quot; data-rawwidth=&quot;1303&quot; data-rawheight=&quot;721&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;1303&quot; data-original=&quot;https://pic2.zhimg.com/6682f1c51d603226a1dc408c36f0b759_r.jpg&quot;&amp;amp;gt;
我们先用“放大镜”选择空白区域，先定位到遮罩的DOM元素上，定位的可能不是很准，这里定位到子元素上了，一般这种情况我们往上层找，找到有个DOM元素有id属性的那个，一般就是，或者你看浏览器的显示当然DOM的区域，选中遮罩的DOM元素，然后右键-》 delete node，或者直接按Delete键，就可以删除这个DOM元素了，如果删错了怎么办，没事，不要急，重新刷新一下页面就行了。&amp;amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/49239a2eb15e5b02e2fd384384c65748.png&quot; data-rawwidth=&quot;966&quot; data-rawheight=&quot;586&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;966&quot; data-original=&quot;https://pic2.zhimg.com/d36fd16fc9e95aa39c2b6afdb5e8d4f5_r.jpg&quot;&amp;amp;gt;下面这个是删除登录窗口的，操作方式同上。 下面这个是删除登录窗口的，操作方式同上。&amp;amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/5ca7fd23c009ec81afcd92b8ad348e0f.png&quot; data-rawwidth=&quot;1065&quot; data-rawheight=&quot;789&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;1065&quot; data-original=&quot;https://pic2.zhimg.com/5290db35c1e282efdd363e17630c0985_r.jpg&quot;&amp;amp;gt;

情况2：
有些网站按F12是没有用的，因为JavaScript脚本把浏览器的默认事件给阻止掉了，但是没事，只要你能打开Chrome DevTools，脚本怎么阻止都没有用。
&amp;amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/d194843c8c3a59d60123794c5bbd160c.png&quot; data-rawwidth=&quot;664&quot; data-rawheight=&quot;858&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;664&quot; data-original=&quot;https://pic1.zhimg.com/66a28af5ee3ac1ff4f38d67be0709ff0_r.jpg&quot;&amp;amp;gt;

打开后你就可以用“放大镜”选中你要复制的内容，点击定位到当前元素，然后就可以复制Elements里面的内容。

如果你要复制的内容里面有HTML标签，你不想要标签怎么办，没事，看下面这个图片
&amp;amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/8627570d2752540a632bf9248d18de89.png&quot; data-rawwidth=&quot;1230&quot; data-rawheight=&quot;558&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;1230&quot; data-original=&quot;https://pic4.zhimg.com/37da2bc0f9391d0bd961214209665c5f_r.jpg&quot;&amp;amp;gt;这段文字里面有一个图片标签和一个超链接，我们先给这个DOM元素添加一个id属性，以便我们后面可以快速找到这个DOM元素，添加属性方法：右键-》Add attribute。 这段文字里面有一个图片标签和一个超链接，我们先给这个DOM元素添加一个id属性，以便我们后面可以快速找到这个DOM元素，添加属性方法：右键-》Add attribute。
&amp;amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/7fa22a145ffe5c8a4e7f00ee455ebc3e.png&quot; data-rawwidth=&quot;960&quot; data-rawheight=&quot;532&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;960&quot; data-original=&quot;https://pic4.zhimg.com/09cb6cf132e4650ab157db393b73ce6b_r.jpg&quot;&amp;amp;gt;
我们添加一个id为 robinbin的属性，然后按 Esc键，打开Console，写一段Javascript。

document.getElementById('robinbin').innerText

回车就有了
&amp;amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/4a9cb3522a8c4c7c3ae41f041d84b2f9.png&quot; data-rawwidth=&quot;1587&quot; data-rawheight=&quot;272&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;1587&quot; data-original=&quot;https://pic4.zhimg.com/b60d3e5585679fd84b65a4da28e05387_r.jpg&quot;&amp;amp;gt;

先这样吧......大家干巴爹

感谢大家的关注，内容有点多，大家看的辛苦了，Chrome DevTools还有很多非常有用的功能，大家可以自己探索下，希望回答能对大家有所帮助。