1.初步介绍
2.操作
2.1快捷键:
ctrl+F12——新标签页打开
ctrl+shift+c——查看页面元素2.2XHR:
监听ajax请求(如搜索提示)当服务器发送post或get请求时,它会监听这些请求,并在下面罗列出来,其中的参数就是我们请求的url或者post中的一些名字和字符;头信息是我们请求和回应的头信息;响应是实际中从服务器接收到的信息。
2.3CSS属性值调整
可用方向键进行微调字体,
- 按住↑或↓,每次以1个单位调整。
- 按住Ctrl+↑或Ctrl+↓,每次以0.1个单位调整。
- 按照Shift+↑或Shift+↓,每次以10个单位调整。
3.Javascript控制台
3.1调试JS程序:
1)console.log(var name)//显示一般的基本日志信息
2)console.info()
3)console.debug()
4)console.warn()//显示带有黄色小图标的警告信息
5)console.error()//可看到出错位置,及相关调试信息,显示带有红色小图标的红色的错误信息3.2控制台输入语句,可代码补全:如输入con+Tab键,可出现命令提示
3.3占位符输出:
如console.log(‘%d年%d月%d日’,2015,2,7);
可输出%d(整数)、%f(浮点数)、%s(字符串)、%o(对象)
作用:可以格式化日志输出3.4日志信息分组:
console.group('第一组');
console.log();...
console.groupEnd();//分组结束标志
console.group('第二组');
console.log();...
console.groupEnd();//分组结束标志
3.5显示对象所有属性和方法:
如:
console.dir(console);
3.6记录代码的运行时间:
如:
console.time("test");
for(var i=0; i<10000;i++){
}
cosole.timeEnd("test");
4.JS代码的调试:
脚本:可查看JS代码,对其设置断点(点击左侧行号即可)
方法:单步进入、单步退出、单步跳过、继续
执行到断点处,切换到监控栏,可改变断点中相应的变量
函数如何被调用:在代码处写入console.trace();
概况栏:可进行简单的性能分析
5.进阶提示:
1.点击所有可以点击的地方(多尝试)
2.点击鼠标右键
3.下拉菜单
4.主菜单