Chrome浏览器 Console调试台的简单使用

打开调试台

方法1:在chrome浏览器中打开网页,按下F12,点击下图框选内容。

方法2: 浏览器中鼠标右键选择查看网页源代码后,再按上图操作。

 调试台的功能

(因为是第一次使用这个调试台,只能罗列一些简单的功能,但用于调试JavaScript代码足够了。)

1、console.log(name);  

// 作用是在调试台中显示name的值(在js中调用)
<script type="text/javascript">
    var name='Hbuilder';
	console.log(name);
</script>

运行截图:(打开调控台,直接就能将num的值输出。)

2、调用js中的function()函数:

<script type="text/javascript">
    var sum=function(a,b){
        var c=a+b; 
        console.log(c);
	}
</script>

运行截图:

3、查找HTML的标签和其它元素

网页源代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="d0" class="div">这是一个div</div>
	</body>
</html>

 例如查找id='d0'的标签:

小技巧:

调试台写满了,点击箭头位置就能将它清空。

 

posted @ 2019-11-09 16:32  XJHui  阅读(978)  评论(0编辑  收藏  举报