最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【总结】浏览器中的开发人员工具(IE9的F12和Chrome的Ctrl+Shift+I)-网页分析的利器

Web crifan 10097浏览 0评论

【什么是浏览器中开发人员工具Developer Tools】

之前无意间知道了Chrome中有个开发人员工具,后来又无意间发现IE9中也有类似的工具,都可以用来调试网页,对于网页相关开发,比如分析网页执行过程,抓取网页内容等,很有用。

对于不了解的基本的抓取网页的逻辑,可以参考:

【整理】关于抓取网页,分析网页内容,模拟登陆网站的逻辑/流程和注意事项


【如何打开“开发人员工具”】

  • IE9:Tools->F12 Developer Tools,快捷键是F12
  • Chrome:浏览器地址栏右边那个扳手的图标的配置按钮->工具->开发人员工具,快捷键是Ctrl+Shift+I

【IE9和Chrome的开发人员工具 使用心得】

下面简单记录一下,对于使用IE9和Chrome的开发人员工具过程中的一些心得。


【IE9的F12 Developer Tools开发人员工具 和Chrome的Ctrl+Shift+I的开发人员工具 所共有的功能】

1.支持对于抓取的每个页面的详细的request header/post data,response header,cookie等信息

IE9和Chrome中的这些功能,是开发工具中的核心的功能,对于任何一款开发工具,都应该是必备的,所以两者都支持,只是各自显示出来方式不同而已。具体不同的显示,算是各有各的特色。

而IE9中有普通列表显示和详细显示(Goto detail view),前者比较方便看到网页执行过程的先后顺序,后者可以很详细各项信息。

Chrome中支持普通的大图标形式和小图标(点击左下角那个蓝色列表小图标,use small resource row)来显示。

2.对于网页跳转后,是否清除之前抓取的内容,可以自己设置

  • IE9

选项设置是Tools->Clear Entries on navigate,

默认是对于console和Network都打勾了,意思是,在开启捕获浏览器的内容之后,对于打开一个网页,自动就会捕获所有内容,但是期间如果网页自动跳转到另外别的地址,那么默认的设置会自动清除之前捕获的内容,而只显示最新当前网页相关的内容。

而在网页分析开发过程中,很可能会遇到登陆同一网页,但是该网页内部会跳转多次,导致很难去分析其跳转过程,而通过更改此设置,可以实现全部显示整个网页从前到后跳转的所有的内容。

所以,对应的可以去取消对于Network的选择:

那么所抓取的内容,都全部都保留了,包括网页跳转之前的所有的内容。

如果像我之前一样,不知道有此设置,那么分析网页跳转,就悲催了。

而通过手动点击停止捕获的方法,是很难或者说是无法有效的抓取到所要的网页内容的。

对应的,在network捕获出来的网页request中,不同navigation网页跳转之间,还有一条水平分割线,方便查看。

后来才发现有这个好用的功能。在此特地感谢IE9提供了这样的好的工具。

  • Chrome

Chrome中是通过直接点击左下方那个黑圆圈(Preserve Log Upon Navigation):

来实现对于网页跳转后,是否清除原先已经捕获的内容。

(2)清除所有已经捕获的内容

IE9是直接点击Clear

Chrome是左下角那个圆圈里面加个反斜杠的图标(Clear):

来清除所有已经抓取的内容的。

3.清除cache和cookie

对于分析网站的过程中,可能会遇到需要清除之前访问网页所得到的已有的缓存和cookie,传统方法是:

对于IE,是到对应的IE临时文件夹中,去清除对应的一个个的cookie和对应的已下载的网页的文件:

而对于Chrome,只能通过:选项->高级选项->隐私设置->清除浏览数据->勾选 清空缓存,删除cookie以及其他网站数据和插件数据,来实现清除cache和cookie的功能。

而此处开发工具中,各自带了对应的功能:

  • IE9:清除cache和cookie很方便

此工具此处提供了很方便的清除的功能:

Cache->

Clear Browser cache for this domain:清除对应的缓存。

clear sesson cookies: 清除当前session(访问当前网页)多对应的cookie,比如登陆了一个skydrive,本地会有对应的session的cookie,此处清除掉之后,就相当于退出登陆了。

clear cookies for domain: 清除当前域名所对应的cookie,比如当前是https://login.live.com/XXX,然后此处就可以直接清除login.lve.com所对应的cookie

  • Chrome:清除cache和cookie不太方便

只能通过右击任一抓取到的页面,选项 clear browser caches 和clear browser cookies:

来实现删除cache和cookie的功能,而不能像IE9中提供方便的清除当前domain和session的cache和cookie的功能。

而想要清除指定的cache和cookie,包括指定的domain和当前session的。只能去Resource->Cookies->点击某个domain->右击某个cookie->delete:

但是却无法全选,无法一次全部删除。

总之功能上,删除cookie和cache,没IE9方便。


【IE9的F12 Developer Tools开发人员工具】

  • 优点/功能

1.支持IE7,IE8等兼容模式

有个Browser Mode,支持IE7,IE8,IE9,IE9 Compatibility View,其可能的作用是,比如浏览铁道部的在线购买火车票的那个12306网站,其不支持IE9,此处就可以通过设置为IE8或IE7模式,以实现可以正常登陆和操作该网站了,否则有些内容在IE9下会有问题,比如我之前遇到的购买车票时要选择日期,就无法选择,通过此方法,就能搞定类似问题了。

2.支持多种User-Agent

对于想要模拟其他不同浏览器或者特定的需要,可以去:

Tools->Change User agent string中:

去设置不同的值。

默认是IE9,其他还支持IE6,IE7,IE8,Google Chrome,Mozilla Firefox,Opera,Bing Bot,设置还可以Custom自定义自己所需要的值。

3.一些小工具:标尺Ruler,颜色选取器Color Picker等

Tools-> show ruler(Ctrl+L),显示标尺,方便查看网页元素的位置。

Tools->Show color picker(ctrl+K):可以捕获屏幕的像素点的颜色,对于html开发人员应该比较有用。

4.javascript格式化

对于此功能,要单独在此提醒一下。

因为之前在写python脚本抓取网页,分析网页的时候,就遇到过关于将杂乱的js脚本格式化成易读的格式,后来找来找去,找到一些网站:【整理】javascript/HTML在线格式化工具(Online Formatter)

去实现js格式化的功能。

而今天无意间发现,原来IE9中,也有此功能。

Script->那个工具图标(configuration Ctrl+Alt+O)->Format Javascript:

同时也有自动换行Word Warp。

5.关于javascript调试功能

这个是后来才发现的,对于开发,分析js源码执行过程来说,极其好用的功能。

Script –> Start Debug(F5)

对于如何开始调试,需要提示一下。

对于打开某个网页后,开发工具会自动识别其中的js脚本,然后并列出来:

选择好自己要调试的js,对着需要打断点的地方点击右键->Insert Breakpoint,然后点击Start Debuging,然后会自动重新载入,就可以开始调试,运行到对应的断点的地方,就会停下来,余下的调试,和Visual Studio 中都很类似了,其中F5是开始调试,F10是按行执行,F11是逐条语句,进入函数式的执行,Shift+F11是跳出函数。

如果点击Start Debuging后,脚本不执行,那么尝试在地址栏中重新输入当地网址,重新载入页面,如果重新载入的页面中,对应的js文件没变的话,即还是包含当前你所加了断点的js文件,那么就可以开始当重新载入网页,运行到你所加断点的位置,然后就可以开始调试了。

此处关于IE9中的调试javascript,说说我所遇到的,需要注意的一些情况:

1.如果重新载入网页,没有包含你之前加了断点的js文件,那么肯定也就无法运行到对应的断点位置,你也就没法debug了。此种情况,我就遇到,skydrive中,载入对应的js文件,是访问类似于这样的地址:

https://secure.wlxrs.com/2Jro0r84zTRoocI0W5VmeA/Bucket1.js

其中2Jro0r84zTRoocI0W5VmeA是每次都不一样的,导致我对当前js文件添加了断点,结果重新载入网页,所获得的页面中,由于这个Bucket1.js的地址变了,就没法运行到我这个地址了。

所以,也就没法debug了。很是郁闷。此种情况,对于别的一般的网站,应该很少出现的。

也只是会在涉及https,加密的文件等情况中,才会遇到这样的事情。

2.如果你js中加断点的位置,是重新载入js重新运行,而没有执行到的位置,那么当前也就无法debug了。

此种情况,有可能出现在,你自己对js中函数的执行流程理解错了,因此打的断点,实际没有执行到。

此种情况,也是需要注意的,尤其是很复杂的js,要多打几个可能会运行到的断点,以避免没有执行到断点的情况。

3.如果遇到调试过程中,对于变量(全局,局部)想要修改其值,但是实际却修改不了,即不给修改,改了也没用,那么又想要实现控制函数的运行,那么可以换种方式。

即点击你想要其函数执行的对应的语句,比如if中的else部分之类的,那么可以对着对应,想要跳转过去的语句,右击,选择“设置下一条语句”:

然后就跳转到对应的语句去了,就可以间接实现改变程序运行逻辑的功能了。

 

另外值得一提的是,调试过程中,变量的显示,很是方便,和Visual Studio  2010中的一样,可以通过鼠标移动到对应变量上面,就可以动态显示对应的变量的值,极大地方便了调试,而且调试界面,不得不说,的确做得很好看,也算很好用。

6.查看当前cookies的值

可以通过Cache->view cookie information,会打开一个新的页面,显示出当前所有的cookie的值,也算方便开发者查看cookie的值了。

7.查找功能很好用

可以实现类似于全文查找,在整个项目中查找的功能,在查找框中输入一个字符串,可以在抓取的网页源码中,request header,response header等内容中去查找,方便分析源码。

  • 缺点

1.使用该开发人员工具之前,比如先打开某个页面才可以

需要当前打开一个页面,然后才可以F12调出该工具,否则无法调出该开发人员工具。这点对于不熟悉的人,还是要提醒一下的。

2.Pin之后的F12的窗口高度最高只能是页面高度的一半

如果将开发工具Pin(Ctrl+P):

到当前页面中后,对于开发工具的高度,拖拽是可以改变高度的,但是最高只能是当前页面的一半的高度,剩下上面一半高度,留作显示网页内容。

此点还是不太爽的,不能像Chrome中一样,自己随意拖拽改变高度。

感觉像是,开发IE9开发工具的的开发人员,多此一举的为用户考虑了,才导致现在的强制规定Pin到窗口的开发工具的高度,最高只能是窗口高度的一半。


【Chrome的Ctrl+Shift+I的开发人员工具】

  • 优点/功能

1.一键拷贝

在Network界面下,对于抓取到的任何一个页面,

右键点击,可以出现多个选项,其中有copy request headers选项,支持一键拷贝所有的request header信息。

类似的功能还有一键拷贝response header等,还是很方便拷贝信息,用于分析的。

否则,就要自己手动用鼠标选择,再拷贝,就有点麻烦了。

2.在查看网页相关内容时候,支持view source和view parsed模式之间切换

在分析网页提交内容,返回的值等过程中,所看到的request header,request post data,response header等信息的时候,有view source和view parsed两种模式,点击即可及时切换,方便了数据分析。

其中对于数据,parsed就是源码中用UrlEncode编码之后的数据,比如将斜杠/变成%2F。

对于header,parsed就是对于原始的header数据按照协议规范去解析。

  • 缺点

1.不能很方便的查找

经常需要查找某个变量或者字符串,结果在Chrome的开发人员工具中,无法搜索到,只有打开了所抓取的,某个html网页,然后搜索才能搜到,而对于其他在request header或者是response header中的值,就无法搜索,这点很是不爽,导致网页分析无法继续下去。

而对应的IE9就支持,类似于全文搜索的功能,可以直接在所有的内容中查找,很是方便,在此赞一下。


【总结】

1.分析网页的执行,跳转等过程中,可以的话,最好还是IE9和Chrome都同时使用,这样易于发现真正的执行过程。

否则万一遇到类似IE9有bug而Chrome是正常的,此时就不会被bug所打扰,而找到真正的网页的执行过程。

比如,遇到一个IE9中的bug,对于访问一个网页所产生的重定向redirect,而抓取的过程中,跳转后的地址的request header中,就显示了多余的内容,导致混淆了分析的过程。而对应的Chrome中,就可以正常抓取并显示此跳转的过程。

转载请注明:在路上 » 【总结】浏览器中的开发人员工具(IE9的F12和Chrome的Ctrl+Shift+I)-网页分析的利器

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (27)

  1. 最近想做个虾米自动签到的,遇到百般困难,偶然间找到了这些文章,真的好详细,先谢谢一个
    link4年前 (2016-03-29)回复
  2. 请问在c#的webbrowser中怎么调出开发者工具啊?
    star5年前 (2015-01-22)回复
  3. 你好,看到你的文章收获很多,我也很喜欢听音乐,同时也希望能够像你一样实现自己的抓取音乐的软件。但是我不太了解如何获取音乐真实的下载地址。 关于songtaste的真实音乐地址查看了下你C#软件的源代码,了解这个流程,但是我当我接触到新的网站时,不知如下入手。 关于利用IE9调试过程有些疑惑,IE9往往直接给出了真实的地址。希望能够得到指点。
    笑威5年前 (2014-10-20)回复
  4. crifan老师,我分析了一个网站,并且写好了'Python'模拟登入的代码. 我的原理就是现用'360极速浏览器'登入目的网站,然后取其中的cookie交给python模拟登入使用(目的网站只采用cookie验证),期中有个问题,成功登入上去,为什么被服务器检测到了(说我以不正当方式登入的?),另外,我用'按键精灵'实现自动化登入时用到了HtmlClick函数也被检测到了,而我'踏踏实实'地模拟点击那个'目的按钮'的时候却可以!
    尹世兴5年前 (2014-09-24)回复
  5. 写的不错,挺全面,受教了
    skywhat5年前 (2014-07-22)回复
  6. 非常感谢!不过,我有一个疑问: 在提交的request string 里 ,有一些参数是我们不知道的。 比如说,一个输入框,点击按钮之后,会提交输入框的文本之外,还会提交一个参数,比如说t,可是,t是怎么得到的 ?怎么调试呢 ? 再次感谢!
    吴文涛5年前 (2014-05-30)回复
    • t一般都是时间(time)值。 可以通过分析相关的js文件中,去找到t是如何获得的。 常见的赋值都是通过获得当前的时间赋值的。 具体调试办法:只能是通过IE的F12中的搜索去搜。其他也没啥好办法。
      crifan5年前 (2014-06-12)回复
  7. 您好。我想用python模拟腾讯微博的登陆和发布过程,用ie9抓取网页的时候什么信息也抓不到,在搜索里输入密码或者用户名根本就搜不到。可能是因为腾讯微博网站经过加密的原因吧。我该怎么操作呢?必须要学习加密解密的知识吗?不知道如何下手了,请您指教。
    6年前 (2014-02-26)回复
  8. 感谢。我有个问题,我用抓到的postdata 是: ------WebKitFormBoundaryhELs0kGRA6bDGRrD Content-Disposition: form-data; name="id1input" fromstring ------WebKitFormBoundaryhELs0kGRA6bDGRrD Content-Disposition: form-data; name="id1str" 10852685 10435371 对应的url是http://pubchem.ncbi.nlm.nih.gov/score_matrix/score_matrix.cgi 这种post data怎么写成字典的形式呢?我把那一段直接当作postdata, req = urllib2.Request(url, postData),返回不了正确的网页。
    yannick6年前 (2013-09-27)回复
    • 真正的变量是10852685 10435371
      yannick6年前 (2013-09-27)回复
      • 1.我们一般所说的post data,那是: 你在做POS时,发送给服务器的数据,指的是没法送前,request所提交的数据,然后得到对应的服务器的响应response 所以,post data,那肯定是request发送之前的数据 2.但是去网上查了查,你所说的这个: Content-Disposition 是属于response header,即: 你把发送request给服务器,服务器返回给你的response中的header 其中有个Content-Disposition 3.所以: 你说你在post data中有Content-Disposition 那从道理上,就是说不通的。 所以请你清楚,你的问题到底是什么。
        crifan6年前 (2013-09-27)回复
        • 谢谢回复, 我的意思是,我想在http://pubchem.ncbi.nlm.nih.gov/score_matrix/score_matrix.cgi里面的ID List一栏里自动输入一些ID(例如:10852685 10435371),然后点击Submit Job得到计算结果。 因此,我用chrome抓包,首先在ID List填写10852685 10435371,然后点击Submit Job.得到如下: Request URL:http://pubchem.ncbi.nlm.nih.gov/score_matrix/score_matrix.cgi Request Method:POST Status Code:200 OK Request Headersview source Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Encoding:gzip,deflate,sdch Accept-Language:zh-CN,zh;q=0.8,en-US;q=0.6,en;q=0.4 Cache-Control:max-age=0 Connection:keep-alive Content-Length:1239 Content-Type:multipart/form-data; boundary=----WebKitFormBoundary245RyoMRyLnPZ8iM Cookie:__utma=116886681.443444177.1380126823.1380126823.1380139056.2; __utmz=116886681.1380126823.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); ncbi_sid=396D42811DCE39F1_0164SID Host:pubchem.ncbi.nlm.nih.gov Origin:http://pubchem.ncbi.nlm.nih.gov Referer:http://pubchem.ncbi.nlm.nih.gov/score_matrix/score_matrix.cgi User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.76 Safari/537.36 Request Payload ------WebKitFormBoundary245RyoMRyLnPZ8iM Content-Disposition: form-data; name="submitjob" Submit Job ------WebKitFormBoundary245RyoMRyLnPZ8iM Content-Disposition: form-data; name="scoretype" sim2dsubs ------WebKitFormBoundary245RyoMRyLnPZ8iM Content-Disposition: form-data; name="n_conf" 1 ------WebKitFormBoundary245RyoMRyLnPZ8iM Content-Disposition: form-data; name="id1input" fromstring ------WebKitFormBoundary245RyoMRyLnPZ8iM Content-Disposition: form-data; name="id1str" 10852685 10435371 ------WebKitFormBoundary245RyoMRyLnPZ8iM Content-Disposition: form-data; name="id1file"; filename="" Content-Type: application/octet-stream ------WebKitFormBoundary245RyoMRyLnPZ8iM Content-Disposition: form-data; name="id2input" none ------WebKitFormBoundary245RyoMRyLnPZ8iM Content-Disposition: form-data; name="id2str" ------WebKitFormBoundary245RyoMRyLnPZ8iM Content-Disposition: form-data; name="id2file"; filename="" Content-Type: application/octet-stream ------WebKitFormBoundary245RyoMRyLnPZ8iM Content-Disposition: form-data; name="format" csv ------WebKitFormBoundary245RyoMRyLnPZ8iM Content-Disposition: form-data; name="compression" gzip ------WebKitFormBoundary245RyoMRyLnPZ8iM-- 其中包含刚刚填写的ID的那一项为: ------WebKitFormBoundary245RyoMRyLnPZ8iM Content-Disposition: form-data; name="id1str" 10852685 10435371 而且所有抓到的包里面,有这个ID的只有上面那一段,所以,是不是Request Payload就是您文章里的post data?如果用IE9抓,request body也会得到同样的结果。 可是Request Payload如何模拟发送呢?因为关键的ID只是列在那里,而不是像您文章里举的例子是ID=’10852685 10435371‘,可以写成python字典的样子。
          yannick6年前 (2013-09-27)回复
          • 1.我之前的说法有误。你的分析是对的。这些包含了一堆的Content-Disposition的数据,就是post data。 2.这样的post data没法用字典,只能靠你自己一点点组合出来了。 3.如何组合,可参考这里的概念的解释: 使用多重部件 POST 添加文件 和: 实现使用HTTP协议发送multipart/form-data类型的HTTP表单 另外,具体如何实现,暂时没有类似的python代码的例子。 但是有类似的C#的代码,供你参考具体是如何组合出来此种post data的: 【未解决】通过百度API上传单个文件出现403的错误 4.其他需要特殊注意和解释的: C#示例代码中的那个boundaryValue,是自己随便设置的,确保是个,相对复杂,不会被(真正要传送的数据中出现)重复即可。 比如此处,你也可以用你所抓取出来的: ——WebKitFormBoundary245RyoMRyLnPZ8iM 或者随便用其他值,也都应该是可以的。 具体解释,详见: Multipart messages 5.抽空,再针对你这种特殊的例子,去写个python示例代码。目前,你先靠自己,根据我前面的提示,自己去试试,应该可以靠你自己搞定的。
            crifan6年前 (2013-09-27)回复
  9. 图都挂了,望博主改进一下,谢谢分享
    林夕6年前 (2013-09-09)回复
    • 图没挂,是放在skydrive上的。其偶尔会不稳定而已。 如果以后经常不稳定,那我再考虑把图片都换一下。
      crifan6年前 (2013-09-10)回复
  10. xp系统没法用ie9,chrome无法全文搜索,苦恼。。。 postdata中一有随机变量就无解。。。
    unranked7年前 (2013-03-03)回复
  11. 请问在Chrome inspect elements里,有没有办法一下子搜索所有的header?
    gyz7年前 (2012-11-20)回复
    • 1.首先,在chrome中,我还真的没找到,哪里是你说的“inspect elements”。 2.其次,只是在“Elements”这个tab页面中,也还是找不到哪里可以去搜索的。 不过后来尝试出来了,可以在鼠标点击到了当前控制界面中,按Ctrl+F,会在左下角调出搜索框,然后可以输入你要的header,然后按Enter键,Chrome就会把搜索到的内容,用黄色标出来的。 3.但总的来说,在支持搜索功能这点上,Chrome的Ctrl+Alt+J和Firefox的FireBug,做的都没有IE9的F12好。
      crifan7年前 (2012-11-20)回复
77 queries in 0.273 seconds, using 19.08MB memory