1. 制作一个简单的页面供测试
Sample.html
<html>
<head>
<title>Hello</title>
</head>
<body>
<p>Helloworld!!!</p>
</body>
</html>
2. chrome访问
3. 点击show console
Elements（元素面板）：基本的功能，左侧是网页整体的层次图，右侧是对应的CSS样式。【熟悉】
Recources（资源面板）：包含网页的所有文件，可以很直观的看出来该页面的一些文件
NetWork :网络 查看网络交互 【熟悉】
Sources :源码调试器（主要针对js调试，支持单步）【熟悉】
TimeLine（时间表面板），监控各个文件的载入以及各个事件的响应时间。
Profiles面板是监控或者说是统计网页占用的内存以及CPU的情况
Audits(审计面板),它可以帮助您检查网页性能和网络利用率
Console(JavaScript 控制台) JavaScript 控制台可与其它面板联合使用，可以借助它来审查 DOM 元素、调试 JavaScript 代码、查看 HTML 解析错误等。【熟悉】
下面主要针对4个熟悉的模块做总结
4. Elements（元素面板）
可以对html实现更改，查看效果
例如：
在Elements中双击 hello world 文字修改后
例如：
单击 elements.style直接加个生效的样式
5. NetWork :网络 查看网络交互 【熟悉】
点击NetWork，刷新页面
看到
其中可以看到
1) 向127.0.0.1 发起了一个GET请求
2) 服务器返回的状态码为304，表示返回的内容和上次一样
3) 浏览器客户端表明自己接受text/html,application/xhtml+xml,application/xml 这些数据格式
4) 浏览器客户端接受 gzip编码，delate编码【DEFLATE是同时使用了LZ77算法与哈夫曼编码（HuffmanCoding）的一个无损数据压缩算法，apache2默认可支持】
Sdch编码
【
sdch主要分成三部分：首次请求；下载字典；其他请求。
首次请求
客户端：
Accept-Encoding:sdch
服务器端：
Get-Dictionary:/path/to/dict
下载字典
客户端根据Get-Dictionary的值来下载字典，普通的HTTP请求。
其他请求
客户端：
Accept-Encoding:sdch
Avail-Dictionary:xxxxx
服务器端：
根据Avail-Dictionary的值来进行sdch编码，如果Accept-Encoding里有gzip，这些数据还会被gzip压缩。之后返回。
】
5）接受的语言为 zh-cn zh
等等
6. Sources : 源码调试器（主要针对js调试，支持单步）【熟悉】
构造一点js来测试
<html>
<head>
<title>Hello</title>
</head>
<body>
<scriptlanguage="javascript">
vartmpSrc = "aaa|bbb|ccc|ddd|eee|fff";
var strs= new Array(); //定义一数组
strs =tmpSrc.split("|"); //字符分割
alert(strs[0]);
</script>
<p>Helloworld!</p>
</body>
</html>
审查元素->sources
选要调试的网页文件或js文件
可以看到
单击行号设置断点
再次运行页面
按F11单步执行2步
可以看到strs得到了执行结果
7. Console(JavaScript 控制台)JavaScript 控制台可与其它面板联合使用，可以借助它来审查 DOM 元素、调试 JavaScript 代码、查看 HTML 解析错误等。【熟悉】
1）添加调试代码
<html>
<head>
<title>Hello</title>
</head>
<body>
<scriptlanguage="javascript">
vartmpSrc = "aaa|bbb|ccc|ddd|eee|fff";
var strs= new Array(); //定义一数组
strs =tmpSrc.split("|"); //字符分割
console.info("这是info");
console.debug("这是debug");
console.warn("这是warn");
console.error("这是error");
</script>
<p>Helloworld!</p>
</body>
</html>
刷新页面，审查元素-console看到
可以点击下面的分类看看效果
2）打印对象
console.log( obj);
类似php中的var_dump
perl中的
print Dumper($hostname);
构造代码
<html>
<head>
<title>Hello</title>
</head>
<body>
<scriptlanguage="javascript">
vartmpSrc = "aaa|bbb|ccc|ddd|eee|fff";
var strs= new Array(); //定义一数组
strs =tmpSrc.split("|"); //字符分割
console.log(strs);
</script>
<p>Helloworld!</p>
</body>
</html>
刷新页面，审查元素-查看console
构造代码
<html>
<head>
<title>Hello</title>
</head>
<body>
<scriptlanguage="javascript">
vartmpSrc = "aaa|bbb|ccc|ddd|eee|fff";
var strs= new Array(); //定义一数组
strs =tmpSrc.split("|"); //字符分割
console.log(strs);
var dog ={} ;
dog.name= "大毛" ;
dog.color= "黄色";
console.log(dog);
</script>
<p>Helloworld!</p>
</body>
</html>
查看
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
