alert 警告框
console 控制台
基本输出 1 2 3 4 5 6 console .log ("打印字符串" );console .error ("我是个错误" );console .info ("我是个信息" );console .warn ("我是个警告" );console .debug ("我是个调试" );cosole.clear ();
格式化输出 1 2 3 4 5 6 7 console .log ("%s年" ,2016 );console .log ("%d年%d月" ,2016 ,11 );console .log ("%f" ,3.1415926 );console .log ("%o" ,console );console .log ("%c自定义样式" ,"font-size:30px;color:#00f" );console .log ("%c我是%c自定义样式" ,"font-size:20px;color:green" ,"font-size:10px;color:red" );
DOM输出 1 2 var ul = document .getElementsByTagName ("ul" );console .dirxml (ul);
对象输出 1 2 3 4 5 var o = { name :"Lily" , age : 18 }; console .dir (obj);
对于多个对象可以如下输出 1 2 3 var stu = [{name :"Bob" ,age :13 ,hobby :"playing" },{name :"Lucy" ,age :14 ,hobby :"reading" },{name :"Jane" ,age :11 ,hobby :"shopping" }];console .log (stu);console .table (stu);
成组输出 1 2 3 4 5 6 console .group ("start" ); console .log ("sub1" );console .log ("sub1" );console .log ("sub1" );console .groupEnd ("end" );
函数计数和跟踪 1 2 3 4 5 6 7 8 9 10 11 function fib (n ){ if (n == 0 ) return ; console .count ("调用次数" ); console .trace (); var a = arguments [1 ] || 1 ; var b = arguments [2 ] || 1 ; console .log ("fib=" + a); [a, b] = [b, a + b]; fib (--n, a, b); } fib (6 );
计时 1 2 3 console .time () fib (100 ); console .timeEnd ()
断言语句 1 2 3 console .assert (true , "我错了" );console .assert (false , "我真的错了" );
性能分析 1 2 3 4 5 6 7 8 9 10 11 12 13 14 function F ( ){ var i = 0 ; function f ( ){ while (i++ == 1000 ); } function g ( ){ while (i++ == 100000 ); } f (); g (); } console .profile ();F ();console .profileEnd ();
debugger
Pause/Resume script execution:暂停/恢复脚本执行(程序执行到下一断点停止)。
Step over next function call:执行到下一步的函数调用(跳到下一行)。
Step into next function call:进入当前函数。
Step out of current function:跳出当前执行函数。
Deactive/Active all breakpoints:关闭/开启所有断点(不会取消)。
Pause on exceptions:异常情况自动断点设置。
Watch:Watch表达式
Call Stack: 栈中变量的调用,这里是递归调用,肯定是在内存栈部分调用。
Scope:当前作用域变量观察。
BreakPoints:当前断点变量观察。
XHR BreakPoints:面向Ajax,专为异步而生的断点调试功能。
DOM BreakPoints:主要包括下列DOM断点,注册方式见下图
当节点属性发生变化时断点(Break on attributes modifications)
当节点内部子节点变化时断点(Break on subtree modifications)
当节点被移除时断点(Break on node removal)
Global Listeners:全局事件监听
Event Listener Breakpoints:事件监听器断点,列出了所有页面及脚本事件,包括:鼠标、键盘、动画、定时器、XHR等等。
F8 or Ctrl + : 暂停/继续
F10 or Ctrl + ‘: 单步执行
F11 or Ctrl +;: 单步进入
Shift + F11 or Ctrl + Shift+;: 单步退出
Ctrl +./Ctrl+, : 上一帧/下一帧(译为框架怪怪的)
Ctrl +Shift+E: 被选中代码在控制台中打印出console信息(非常实用)
Ctrl + Shift + A: 添加到debugger的watch里面,可以关注你选中内容的变化
Ctrl + B: 打断点/取消断点(很实用)
Application面板 该面板主要是记录网站加载的所有资源信息,包括存储数据(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等。
Local Storage 如果你在开发过程中使用了local storage来存储键值对(KVPs),那么你就可以通过Local Storage窗格来检查、新增、修改、删除这个键值对。
Application Cache 你可以使用Application Cache窗格去查看通过Application Cache API创建的资源。
Frames 将页面上的资源按frame类别进行组织显示。
Frames窗格
在上图中可以查看到顶级的top是一个主文档,在top下面是主文档的Fonts、Images、Scripts、Stylesheets等资源。最后一个就是主文件自身。
在资源上右击后在弹出菜单选择Reveal in Network Panel,就会跳转到Network面板并定位到该资源的位置。
__END__