开发人员工具

写南邮攻防平台一道web题(AAencode)的时候，看了别人的wp才知道js代码可以直接在控制台中执行，当我还是找颜文字js解密网站的时候人家都是直接复制到控制台中跑一下就得到flag了..
1
发现自己的基础知识可太薄弱了，于是决定总结一些开发人员工具里的功能

火狐和谷歌中的开发人员工具

001
002

几个常用工具

查看器

这个功能很熟悉了不用多说，作用查看页面源代码

网络

6
记录了页面上网络请求的详情信息。Google里的network面板和Firefox里的网络面板显示内容略有不同，但功能都很强大，具体可以看这篇文章： Google开发者工具面板-network详解，不过我注意到的一点是Firefox的网络面板可以直接点击“编辑和重发”进行模拟请求，跟bp功能差不多，(一些版本的Firefox这个功能失效了)谷歌应该也有，但是需要安装插件

Sources

进行js断点调试

控制台

控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息.

1.console.log()

用于在控制台输出信息。该方法对于开发过程进行测试很有帮助。

1
2
3
4
console.log('消息内容！'); //输出普通信息
　　console.info('消息内容！'); //输出提示信息
　　console.error('消息内容！');//输出错误信息
　　console.warn('消息内容！'); //输出警告信息

2

2.console.table

格式化表格。
console.table可以将一段同格式的数组转换为一个表格输出在控制台，方便查看
3

3. 统计代码的执行时间

1
2
3
console.time('统计时间')
for(var i = 0; i < 999 ;i++){}
console.timeEnd('统计时间')

4

4.分组输出

调试复杂的程序，需做大量输出判断的时候使用分组输出

1
2
3
4
5
console.group('a组');
　　console.log('a1');
　　console.log('a2');
　　console.log('a3');
　　console.groupEnd();

5

and so on ….
…
..
.
（不想写了.^.）

参考资料：

Chrome——F12 谷歌开发者工具详解
https://www.cnblogs.com/xiaowenshu/p/10450848.html

关于火狐浏览器开发者工具使用
https://blog.csdn.net/gutie_bartholomew/article/details/82558031

Google开发者工具面板-network详解
https://blog.csdn.net/zengzhenzong/article/details/80446732

js技巧 console.log使用https://blog.csdn.net/qq_30811721/article/details/83147090