Chrome浏览器 Console调试台的简单使用_f12调试台更改源代码怎么运行-CSDN博客

本文链接：https://blog.csdn.net/weixin_43350051/article/details/102986822

打开调试台

方法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'的标签：

小技巧：

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