上篇向大家介绍完了基础功能篇，这次分享的是Chrome开发工具中最有用的面板Sources。 &Sources面板几乎是我最常用到的Chrome功能面板，也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题，在审视一遍自己的代码而一无所获之后，我首先就会打开Sources进行js断点调试，而它也几乎能解决我80%的代码问题。Js断点这个功能让人兴奋不已，在没有js断点功能，只能在IE（万恶的IE）中靠alert弹出窗口调试js代码的时代（特别alert一个object根本不会理你），那样的开发环境对于前端程序员来说简直是一场噩梦。本篇文章讲会介绍Sources的具体用法，帮助各位在开发过程中够愉快地调试js代码，而不是因它而发疯。首先打开F12开发工具切换到Sources面板中:
　　Sources功能面板是资源面板，他主要分为四个部分，四个部分并不是独立的，他们互相关联，互动共同实现一个重要的功能:监控js在执行期的活动。简单来说就是断点啦。
　　首先我们来看区域1，它的功能有些类似于Resources面板，主要是显示网页加载的脚本文件：例如css， js等资源文件（它不包含cookie，img等静态资源文件）。
　　区域1的导航条上有三个tab切换选项，他们都存有不同域名和环境下的js和css文件，我们首先来说明Sources（资源）选项的作用:
　　Sources: 包含该项目的静态资源文件。双击选中文件，该文件内容会在区域2中显示，如果你选中的是js文件，那么你可以在区域2种单击行号进行断点调试，只要js执行到了你所标记的这一行，它会停止向下执行并且等待你的命令:
　　从上图可以看到js执行到断点处时各个区域的变化，首先是区域3中的Breakpoints记录信息会变高亮，然后是区域4中Scope&选项中列出了断点处私有和公有的变量信息，这样，我可以很直观地知道，此时此刻js的执行状态。同样的，你可以把鼠标放到区域2种的某个变量上，浏览器会弹出一个小框框，框框里面则是你悬浮其上的变量所有信息:
&　　然后，你可以按F10跟着js执行的路径一步一步地走下去，如果你遇到了一个函数包含着另外一个函数，那么你可以按F11进入到个函数中去观察它的代码执行活动。你也可以通过点击区域1底部的各个图标对js代码进行跟踪。不过我建议你使用快捷键，故名思义，因为它比较快捷方便。不过怎么用完全按照个人习惯来吧。下图是各个按钮的作用功能。
　　在上图蓝色圆圈中数字，它们分别代表:
　　1、停止断点调试
　　2、不跳入函数中去，继续执行下一行代码（F10）
　　3、跳入函数中去（F11）
　　4、从执行的函数中跳出
　　5、禁用所有的断点，不做任何调试
　　6、程序运行时遇到异常时是否中断的开关
　　接下来在区域4种切换到Watch Expressions 选项，它的作用是为目前断点添加表达式，使得每次断点往下走一步都会执行你写下的js代码。需要注意的是这个功能必须谨慎使用，因为这可能会导致你写下的监控代码段会不断地被执行。
　　为了避免你的调试代码重复执行，我们可以在调试时直接在console控制台上一次性地输出当前断点处的信息（推荐这样做）。为了验证我们在console面板中拥有的是当前断点环境，我门可以对比断点执行前后的this值变化。
&　　如果你觉得在断点的时候为了看一个变量必须借用console面板输出的方式来查看会比较麻烦，那么你可以更新最新版的Chrome，它已经为我们解决了这个烦恼。为了方便开发者调试，在这一点上谷歌已经做到了极致，就在前几天更新过Chrome以后，卤煮意外地发现了断点时监控环境变量的另外一种方式，这种方式极为清晰，在断点调试的时候，区域2中会自动显示每个变量的值，每次代码往下走的时候这个值都回时时更新。这让开发者对当前环境变量几乎可以说是一目了然。（此功能有一个小缺陷，那就是无法查看数组或者对象的具体索引和值，不过我相信google会改进它的。）
　　当你的项目已经线上，出现了一个bug，你修复了之后无法看到它真正在线上的效果，那么你可以在打开线上的项目，直接在浏览器中修改代码然后看到效果。这样的效果往往是最直接的，这种方法也能帮你省去频繁验证发布的麻烦，毕竟身为前端码农的你也一定会听到过后台（通常情况下是后台发布）大哥的抱怨：&XXX，测试通过了没，不要出现了哈，发布一次很麻烦的！&。而在Chrome里面，只需要在区域2种直接修改，你就可以验证你的代码在线上是否可行。卤煮在此处只是指出该功能的用法之一。其他的就凭诸位的聪明才智去想了。
　　& & & &&
　　即使在断点时，你也可以编辑代码，按ctrl+S保存之后，你会看到区域2的背景由白色变为浅色，而断点会重新开始执行。
　　回到区域1，Content script 选项开里面包含着一些第三方插件或者浏览器自身的js代码,经常它是被忽略的，实际上它的作用很少。我们可以更多关注一下Snippets选项。还记得基础篇里面介绍的style吗？在里面我们可以编辑界面的css代码并且即时看到它们的映射效果，同样地，在Sinppets中，我们也 可以编辑（重写）js代码片段。这些片段实际上就相当于你的js文件一样，不同的是本地的js文件在编辑器里面编辑的，而此处，你是在浏览器中编写的。这些代码片段在浏览器刷新的时候既不会消失，也不会执行，除非是你手动执行它。它可以存在你的本地浏览器中，即使关闭浏览器，再次打开时它依然还在那里。它的主要作用可以使得我们编写一些项目的测试代码时提供便捷，你知道，如果你在编辑器上编写这些代码，在发布时你必须为它们添加注释符号或者手动删除它们，而在浏览器上编写就不需要这样繁琐了。
　　在Snippets选项的空白处右键后选择弹出的new选项，建立一个你自己的新的文件，然后在区域2种编辑它。
　　Snippets&的非常功能强大，它的许多隐藏功能还有待发掘。目前卤煮使用它是在记住调试片段、单元测试、少量的功能代码编写功能上。
　　最后我们看看js中时间丰富的监控功能，同上篇文章介绍的一样，Sources面板和Elements面板一样有监控事件的功能，而且Sources中功能更加丰富，也更加强大。它的这部分功能集中在区域3中。我以下图为例，观察其作用。
　　从上到下，紫色圈内的数字的意义：
　　1、断点处的债堆栈，就是从该函数起，逐级追寻调用到他的函数名。例如:
function a () {
function b() {
function c() {
//在该处断点，查看call stack
call stack 从上到下的顺序就是
　　&2、在区域2中你的断点调试信息。当某个断点在执行的时候对应的信息会高亮，双击该处信息可以在区域2中快速定位。
　　3、添加的Dom监控信息。
　　4、击+ 并输入 URL 包含的字符串即可监听该 URL 的 Ajax 请求，输入内容就相当于 URL 的过滤器。如果什么都不填，那么就监听所有 XHR 请求。一旦 XHR 调用触发时就会在 request.send() 的地方中断。
　　5、为网页添加各种类型的断点信息。如选中了Mouse中的某一项（click），当你在网页上出发这个动作（单击网页任意地方），你浏览器就是立刻断点监控该事件。
　　值得再次重复一遍，Sources是一般的功能开发中最常用到也是最有用的功能面板，它里面的许多功能对于我们开发前端工程来说是非常有帮助的。在web2.0时代的今天，我不推荐依然在自己的代码里面写调试信息的行为，因为这会然你的开发变得繁琐。Chrome开发工具给我们提供的强大功能，我们应该好好利用之。这篇文章就到此结束，虽然有点繁琐，但总算基本表述了卤煮使用经验和想法，希望对你有帮助。如果你觉得不错，请推荐一下本文并继续关注卤煮在的博客。在下一篇中我将向大家介绍Chrome开发工具中的性能方面的调试。
阅读(...) 评论()网页头部多出一个空行，head内容跑到了body - 任霏的个人网站与博客 -
- 关注分享互联网、IT技术、软件应用等计算机科技领域的IT科技博客
博主在制作WordPress主题时，发现网页的最上方，出现一个空行，怎么设置CSS样式也在，不管用，查看源码，没问题，用chrome console（用chrome浏览器点右键“审查元素”，相当于firefox的firebug）查看，竟然发现meta，link，script等head里的东西全跑到body里去了，而且body下还有两个空行，用引号括起来的，看图：
在网上找了半天，知道了其中的原因，因为首页的php文件我使用了记事本编辑，事情是这样的：
用ultraedit打开原文件，在十六进制下查看发现比新文件多了三个字节“EF BB BF”，使用dreamweaver或者Notepad++等编辑器，开头就不会有“EF BB BF”这三个字节。
EF BB BF是微软在文本文件开头加的UTF8字节序标记
而我正是用的Windows自带的记事本对php文件进行编辑，于是被加上了EF BB BF，但PHP显然不支持微软“独具匠心”的设计，于是乱了。
所以广大程序员，还是使用专业的编辑器比较靠谱，记事本还不是万能的。
NeilRen in Github
使用开源，回归开源；开源是极客们向技术垄断发起的挑战；是程序员们的饕餮狂欢。
Popular Tags
Most Recent
微信订阅号
扫描二维码或者搜索微信：NeilRenCom
关注 NEILREN 微信订阅号，软件开发、技术资讯、建站交流，新鲜的你总是第一个知道。之前为了方便，直接在服务器修改文件，然后点保存，但是问题来了，在顶部莫名奇妙多了一个空行，如图1
原来在源代码编辑的代码如图2
但是在FF或者Chrome外部样式却在body里面，而不是head里头，如图3
再看看谷歌body里面却无端端多了一行空行，如图4
同时，在FF查看源码却发现Head，body无端端变成红色，而其他页面除了第一行&html&标红色外，其他head,body为黑色,如图5
解决方法：把这一页保存为UTF-8格式以上图片均显示正常
思考：出现这个问题的极有可能当初保存了UTF-8 with bom这种格式！
阅读(...) 评论()chrome开发者工具功能拾遗：Network面板篇 - CSDN博客
chrome开发者工具功能拾遗：Network面板篇
本文主要介绍一些本人在此之前不甚了解，但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能。也借这篇文章提醒一下自己，在实际项目中多使用这些功能，尽快熟悉起来，提升自己的工作效率。
Capture screenshots（捕捉网页截图）
Capture screenshots是自动分析DOM树的变化，截下DOM树变化各个重要阶段时的页面，尚不清楚是如何判断截图时机的（不过肯定是在DOM树有变化的时候才截图的）。除了截图外，还能看到每个截图所对应的Network情况，通过横向比较，可以发现一些请求（图片、js、css、xhr等）对页面的影响，举例来说：在加载某js前，页面上是没有菜单的，加载后菜单就出来了，那就可以粗略地判断此js与菜单有关。
另外，这功能对于解决页面抖动（最常见于MVVM框架的DOM树渲染，以及由于图片未加载导致该区域尺寸未定的情况）也有很大的帮助。
此功能应该比较新，在网上看chrome开发者工具相关文章时，发现他们的版本根本就没有这个功能（从开发者工具界面截图得知），也不知道他们用的是什么版本，反正我的chrome 46是有这功能的。
使用这功能的方法如下：
1. 打开Network面板，点亮左上角那个像是摄像机的图标（鼠标移上去会提示Capture screenshots）。
2. 点亮该图标后，会打开新的一折叠面板，在该面板上会提示按Ctrl + R来启动截图。
3. 按Ctrl + R后，截图就自动完成了，如下图所示：
4. 双击某截图就能看大图。
5. 点击选中某截图，就能查看该截图时刻的Network情况。
本文已收录于以下专栏：
相关文章推荐
经常会听到比如"为什么我的js代码没执行啊？","我明明发送了请求，为什么反应？","我这个网站怎么加载的这么慢？"这类的问题，那么问题既然存在，就需要去解决它，需要解决它，首先我们得找对导致问题的原...
Chrome浏览器开发者工具Network窗口下，可以查看下载各组件所需的具体时间
根据上表进行简要分析——
Stalled（阻塞）
　　浏览器对同一个主机域名的并发连接数有...
工欲善其事 必先利器。
Google调试面板
java图片查看器
java似乎没有一个名字叫图片控件的 控件，使用swing 的Label显示图片
他的代码如下：
package swing.
import ...
Runtime.exec()小结
发表于3 天前 / 编程开发 / 暂无评论
按项目需求，把终端系统logcat日志写到SD卡下的某个文件，方便拷贝/查看。以下是利用Runtime.e...
本文主要介绍一些本人在此之前不甚了解，但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能。也借这篇文章提醒一下自己，在实际项目中多使用这些功能，尽快熟悉起来，提升自己的工...
Chrome开发者工具详解(2)-Network面板注： 这一篇主要讲解面板Network，参考了Google的相关文档，主要用于公司内部技术分享。Chrome开发者工具面板面板上包含了Element...
Chrome开发者工具详解(4)-Profiles面板如果上篇中的Timeline面板所提供的信息不能满足你的要求，你可以使用Profiles面板，利用这个面板你可以追踪网页程序的内存泄漏问题，进一步...
Chrome开发者工具详解(3)-Timeline面板注： 这一篇主要讲解面板Timeline，参考了Google的相关文档，主要用于公司内部技术分享。。Timeline面板Timeline面板是整个...
如果上篇中的Timeline面板所提供的信息不能满足你的要求，你可以使用Profiles面板，利用这个面板你可以追踪网页程序的内存泄漏问题，进一步提升程序的JavaScript执行性能。
他的最新文章
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)注： 这一篇主要讲解面板Timeline，参考了Google的相关文档，主要用于公司内部技术分享。。
注： 这一篇主要讲解面板Timeline，参考了Google的相关文档，主要用于公司内部技术分享。。
Timeline面板是整个面板里面最复杂的一个面板，涉及的东西比较多。可以利用这个面板来记录和分析网页运行过程中的所有活动行为信息。
你可以充分利用这个面板来分析你的网页的程序性能问题。
下图是从Google官方网站中介绍Timeline面板的图贴到这里，该面板主要包括4大块窗格(Pane)：
Controls 录制开关和控制录制过程中需要记录哪些信息。
Overview 网页性能的概要信息。
Flame Chart CPU堆栈轨迹的可视化图表(火焰图)。在图表里面有1到3条虚竖线。
Details 当选择一个指定的事件后，会显示这个事件的更多信息；当没有选择事件时，会显示指定的时间帧信息。
Flame Chart里面的虚竖线含义：蓝色标记DOMContentLoaded事件；绿色标记第一次的绘制时间点；红色代表load事件。
其中第2块Overview显示了网页性能相关的概要信息，可以通过鼠标或者区域边界上的灰色滑块来拖出一个指定区域范围，Flame Chart会跟着局部放大显示指定区域内的详情信息。
可以通过键盘上的W,S来放大和缩小指定区域，通过A,D来向左或向右移动指定区域。
从Google把图贴到这里，这个窗格包含了三个图表：
FPS 每秒帧数(Frames Per Second)。绿色柱状条越高，则每秒帧数越高。在FPS图表上方的红色块是标记一个长帧。
CPU 标记CPU资源的使用情况，这里的面积图标记着消耗CPU资源的各类事件。
NET 各种颜色的柱状条分别显示一种资源。柱状条越长，代表获取这个资源的时间越长。
CPU面积图中各颜色的含义：蓝色代表HTML文件；黄色代表脚本文件；紫色代表样式文件；绿色代表媒体文件；灰色代表其它杂项文件。
NET图表柱状条两种颜色的含义：较亮的部分表示等待时间（当资源被请求时，直到第一个字节被下载的时间)；较暗的部分表示传输时间(在第一个和最后一个字节被下载之间的时间)。
网页录制详情
支持两种网页录制操作：①录制网页加载，②录制网页交互。为了便于分析，录制的时间不宜太长、还要避免不必要的交互操作、并禁用浏览器的缓存和插件。
当录制完成后，在Flame Chart(火焰图)中点击左侧三角可以展开详情，点击其中的事件或者空白处，可以在Details里面查看该事件或者总的概要信息。这里面包含的信息量很大，限于篇幅原因，下次有机会再作深入介绍，或者直接到Google上查看这个参考文档。
录制中进行JS分析
在录制之前点击Controls中的JS Profile复选框，可以在时间轴中捕获JavaScript的堆栈信息(会产生一定的性能消耗)，并且在Flame Chart(火焰图)中会显示所有被调用的JavaScript函数信息。
录制中捕获截屏
在录制之前点击Controls中的Screenshots复选框，可以在录制过程中捕获截屏，鼠标在Overview上从左向右移动则可以看到录制的动画。
在录制之前点击Controls中的Paint复选框，可以获取绘制事件的更多细节信息（注意这会产生很多的性能消耗）。如果要深入了解网页渲染方面的信息，可以点击DevTools右上角的菜单，在More tools里面选中Rendering settings，这里面包含了如下设置项：
Paint Flashing 高亮显示网页中需要被重绘的部分。
Layer Borders 显示Layer边界。
FPS Meter 每一秒的帧细节，帧速率的分布信息和GPU的内存使用情况。
Scrolling Performance Issues 分析鼠标滚动时的性能问题，会显示使屏幕滚动变慢的区域。
Emulate CSS Media 仿真CSS媒体类型，查看不同的设备上CSS样式效果，可能的媒体类型选项有print、screen。
把上面的所有设置项勾选上，网页的显示效果如下：
查询指定事件
你可以通过在DevTools上按Cmd+F(Mac)调出查询框，来查看指定时间区域范围内的指定类型的事件，点击Cmd+G(Mac)或者Cmd+Shift+G(Mac)可以按事件发生的顺序来查询。
图中查询到了4个红色标记着的Parse HTML事件，点击Cmd+G焦点会在这4个事件移动。
运行时性能分析
上面大致介绍了Timeline面板上的各个功能菜单，那么如何去利用该面板去分析和优化网页程序的运行性能呢，由于篇幅限制，就不在这边展开讨论，感兴趣的读者直接到Google开发者文档上查看，Google开发者文档有最权威最新的信息。
阅读(...) 评论()