《进击JavaScript核心》学习笔记

一、调试工具

常见的浏览器调试工具

IE8+(开发人员工具)

Firefox(firebug)

Chrome(审查元素)

其余浏览器通常基于IE或者Chrome

页面审查元素：

一、查看动态添加到页面的元素

二、查看页面元素绑定的事件

三、在线编辑页面元素样式、属性、内容，而且实时展现

四、样式数字值可使用键盘上下方向键微调整

二、网络监听

页面所有资源网络请求、请求耗时、状态码、头信息

Ajax请求返回Json数据格式化查看

支持按请求类型分组过滤查看

查看页面彻底加载耗时，总请求个数

网页中的Network，红色表示监听网络，点击变为灰色则是再也不监听网络。

总结：静态资源请求状态码可用于分析是否使用了缓存

请求头信息可用于查看请求携带Cookie信息

响应头信息可用于分析服务器配置信息

单个请求耗时与总请求耗时可用于网络优化

三、Chrome浏览器调试工具-静态资源

按url目录结构查看图片、脚本、样式

脚本支持断点调试

总结：若是文件加载失败，好比路径不对，不会出如今静态资源目录中。

JS代码动态追加的静态资源，也会动态出如今资源目录中。

四、控制台

打印不一样级别日志信息，用于程序追踪

动态执行代码，用于验证代码正确性和结果

查看断点处变量值

总结：不一样日志级别在控制台显示不一样颜色

动态执行的代码，定义的变量都是全局变量，上下文有关联性

五、本地存储

本地存储只能查看当前域名存储数据

Cookie信息有效期，所属域名路径

SessionStorage和LocalStorage能够存储任意字符内容

Storage的存储容量比Cookie的容量更大，H5开发中很经常使用

总结：Cookie和Storage都支持查看，增长，修改，清除

Cookie存数的数据，当过时日期小于当前日期，则自动删除

SessionStorage存储数据在关闭浏览器以后就没了

LocalStorage存储数据能够长期保存，没有截止有效有效期

本地存储只能看当前域名全部信息

Cookie信息有效期，所属域名路径

SessionStorage和LocalStorage能够储存任意字符内容

Storage的存储容量比Cookie的容量更大，H5开发中很是经常使用！

 

断点调试：

增长断点，停用断点，单步执行，跳过断点
3种方式查看代码单步执行过程当中变量的值
断点管理，部分启用与停用，所有移除
Source中使用crtl/command+o进行文件搜索，也能够手动打开对应的file下面的文件夹

 

第一个按钮表明唤醒咱们的程序：若是点击一下程序就会跳过当前断点，程序所有进行执行，也能够用于2个断点时，第一个断点执行过程当中直接跳出，执行第二个断点。
行号点击鼠标左键会增长一个箭头标记表明断点增长成功，而后点击行号代码对应的页面位置，而后本行代码被选取表示当前程序已经执行了断点函数

 

单步执行按钮：程序单行执行，想要多执行几回就多点击几回单行执行按钮，单步执行过程当中，鼠标选中逻辑语句，能够查看最终运算结果。

 

不执行变量，对变量进行查看的3种方式：
1. 将鼠标滑到对应变量位置

2. 在控制台中直接输入变量名称，回车就会输出对应变量的值

   3.  选中咱们要查看的变量，鼠标右键找到：Add to watch（将这个变量增长到看板中）

 

鼠标选中逻辑判断：会计算出当前逻辑运算的最终结果，而且和变量提示同样

 

若是想进入函数进行单独调试，能够在对应函数中增长一个断点，再点击单步执行按钮，就会进入单步执行。

2.进入函数内部执行，点击按钮，也可使用跳出函数

在Watch中取消勾选就能取消对应行数的断点，表示断点被临时停用，执行时就会被忽略掉。

禁用全部断点按钮，程序执行将不会进入断点

 

调试完成已经结束后，想要移除程序中全部断点，那么就使用断点管理里面的Breakpoints，而后点击鼠标右键点击Remove breakpoint只会移除一个断点，若是是用Deactivate breakpoints表示移除全部断点。

 

本地的脚本代码支持动态修改（不经常使用），修改以后ctrl+s保存就能看效果、