Chrome浏览器面板基础了解


本篇参考博客链接：

https://www.cnblogs.com/charliechu/p/5948448.html

http://www.cnblogs.com/camille666/p/memory_debug_chrome.html

拓展链接：

https://developers.google.com/web/tools/chrome-devtools/?hl=zh-cn#_2

Chrome开发者工具面板

面板上包含了Elements面板、Console面板、Sources面板、Network面板、Performance面板、Memory面板、Application面板、Security面板、Audits面板这些功能面板。

这些按钮的功能点如下：

控制面板

  • Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
  • Console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
  • Sources:断点调试JS。
  • Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
  • Performance:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。
  • Memory:如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
  • Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
  • Security:判断当前网页是否安全。

  • Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。

Elements面板

上图左侧是网页的主体标签，需要查看哪个节点直接双击就可以；

上图右侧是elements面板中的几个子功能：包含有Styles/Computed/EventListeners/DomBreakpoints/Properties/Accessibility多种功能。

  • Styles:查看当前选中的标签的样式设置，其中标签状态可选，如图所示，直接勾选即可，也可以通过inherited from来查看继承的样式，同时这里可以直接编辑元素的样式，可以直接在浏览器中查看效果，也可以同勾选样式或者改变样式数据来测试各种样式的效果，非常方便。
  • Computed：点击右侧Computed面板，可以编辑左侧选中的盒子模型参数，所有的值都是可以修改的;点击不同的位置(top、bottom、left、right) 就可以修改元素的padding、border、margin属性值。（基本概括完毕，我没有添加了）
  • EventListeners：这里是查看页面元素添加过的事件。
  • DomBreakpoints：暂时不清楚。
  • Properties：元素具有的属性与方法，但这里我自己并没有看太明白。
  • Accessibility：暂时不清楚。
  • 查看网页的本地修改历史  这一点还没发现\(^o^)/~（摘自原博客）
    • 点击Styles面板中修改过属性的文件名，会跳转到Source面板
    • 在文件位置右击选择Local modifications,可以查看本地的所有修改记录
    • 点击指定的时间点可以看到粉红背景的删除内容和绿色背景的添加内容

 

Console面板

elements面板左下面板还有的选项就是缩小版的打印台哈：1是选择一些功能，见下面的右图，右图的这些功能我还没搞清楚，搞清楚了再来补充；2是选择文件；3是过滤；4不清楚；5是查看各个文件的console值

         

Sources面板

这个面板我目前主要是用于调试js,左侧分为page/filesystem/overrides/contentscripts/snippets几个功能,目前主要查看page功能，查看页面的各个源文件，选择相应的js文件，然后选择要调试的代码段使用右侧的功能键进行调试，右侧一层是开始/暂停/跳过/进入调试具体功能函数的按钮，二层watch是监视需要监视参数，观察其具体变化，再下层的这些都并不太了解，待补充。

Network面板

 这个面板主要用来查看网络请求、页面响应的各个参数，方便优化。1行是用来选择需要查看请求响应的方式，2行选择查看需要查看的文件类型，3行是是显示请求响应时间，4行是具体的各个页面请求数据。

第1行：

  • group by frame: 逐帧显示
  • preserve log: 保留请求日志
  • disable cache:禁用缓存
  • offline:离线
  • online的各个选择：模拟调试3G网络测试

第4行：选择一个文件双击

  • headers:请求头信息和响应头信息
  • preview: 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
    　　　　在Preview(预览功能)中，控制台会把发送过来的json数据自动转换成javascript的对象格式
  • response:响应主体，页面内容
  • timing:时间

performance面板

这个面板主要是用来查看调试网页的性能的，有多种选择，这个层次目前对于我来说太高了，略过不表。

这里暂告一段落。

 

posted @ 2018-12-26 19:53  Ressiry  阅读(1275)  评论(0)  编辑  收藏  举报