调试:设置断点

console.trace():查看函数如何被调用,(概况)

javascript控制台:

console.log():打印

console.info():

console.debug():

console.warn():

console.error():

console.dir():显示一个对象所有的属性和方法

alert();弹出

监听方法运行时间:

console.time("test");
console.timeEnd("test");

ajax监听: 网络下面有个XHR

控制台:JS命令行操作操作,显示JS错误信息、提示信息、日志信息等

脚本:显示页面脚本和调试

DOM:显示页面对象和属性

网络:显示页面下载和花费时间

Cookies:显示页面请求的Cookies,以及查看和修改

下载:https://www.getfirebug.com,工具栏有个小甲虫图标,点击就可打开

FireBug:是Firefox下的开发类插件.

1. firebug下载地址

    https://www.getfirebug.com

FireBUG

占位符 %d整数 %f浮点数 %s字符串 %o对象

测试js代码运行时间：console.time("test");

js代码块；console.timeEnd("test");

console.dir("可以显示一个对象的所有属性和方法");

每次都输出循环 i 的值：console.log(i); 日志信息

还有其他的输出方式：

console.log(i);

console.info(i);

console.debug(i);

console.warn(i);

console.error(i);  可以看到相关的位置和调试信息

日志归类/分组

console.group("第一组");

console.log("101");

console.log("102");

console.log("103");

console.groupEnd();

console.group("第二组");

console.log("201");

console.log("202");

console.log("203");

console.groupEnd();

firebug安装：https://www.getfirebug.com

https://getfirebug.com/

小甲虫

F12

Ctrl+F12

fireBug介绍

进阶提示：

1、点击所有可以点击的地方

2、点击鼠标的右键

3、下拉菜单：eg：网络标签

4、小甲虫的图标（主菜单）右键---查看相关菜单

(Firebug最终的功能)JavaScript控制台：

每次都输出循环 i 的值：console.log(i); 日志信息

还有其他的输出方式：

console.log(i);

console.info(i);

console.debug(i);

console.warn(i);

console.error(i);  可以看到相关的位置和调试信息

最重要的：console.dir("可以显示一个对象的所有属性和方法");

eg:console.dir(console);

用来查看代码运行时间：

console.time("test");

for(var i=0;i<1000;i++){

}

console.timeEnd(test);

右侧：命令行可以输入多行，点击执行则输出命令

点击table键来补全代码

或者放下侧：回车输出命令

如何输出不同格式的日志：

用占位符：%d(整数) %f(浮点)  %s(字符串) %o(对象)

console.log('%d年%d月%d日',2014,5,25)

console.log('%d年%s月%d日',2014,'05',25)  字符串的05

日志归类/分组

console.group("第一组");

console.log("101");

console.log("102");

console.log("103");

console.groupEnd();

console.group("第二组");

console.log("201");

console.log("202");

console.log("203");

console.groupEnd();

网络标签评估页面下载速度：

可以看到全部（HTML、JavaScript、图片）加载时间线

可以看到：状态：200 OK 304加载本地缓存（重定向）

查看：缓存、cookie、和头信息

Ctrl+shift+C相当于快速定位HTML按钮

如何编辑：双击 或者 右键---编辑HTML

Firebug网址

控制台日志分组

console.dir(console);

测试js代码运行时间：console.time("test"); …………js代码块；console.timeEnd("test");

占位符 %d整数 %f浮点数 %s字符串 %o对象

console.log