chrome console总结

最新推荐文章于 2024-10-23 09:15:28 发布

iteye_17561

最新推荐文章于 2024-10-23 09:15:28 发布

阅读量174

点赞数

文章标签： javascript php xhtml ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_17561/article/details/82580984

版权

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编码【是同时使用了LZ77算法与哈夫曼编码（HuffmanCoding）的一个无损数据压缩算法，apache2默认可支持】

Sdch编码

【

sdch主要分成三部分：首次请求；下载字典；其他请求。

首次请求

客户端：

Accept-Encoding:sdch

服务器端：

....................................................................

下载字典

客户端根据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>

查看

具体请点击：http://www.verydemo.com/demo_c101_i69350.html