打开调试台

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

小技巧：

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

Chrome浏览器 Console调试台的简单使用的更多相关文章

  1. chrome 浏览器 console 加入 jquery 测试调试 一介布衣

    chrome 浏览器 console 加入 jquery 测试调试 一介布衣   var jquery = document.createElement('script'); jquery.src = ...

  2. Chrome浏览器及调试教程

    ==>(微信公众号:IT知更鸟)欢迎关注<^>@<^> Chrome浏览器及调试教程 在web开发过程中,我们在写JavaScript脚本时难免会遇到各种bug,这时,我 ...

  3. [转]chrome浏览器中 F12 功能的简单介绍

    本文转自:https://www.cnblogs.com/zhuzhubaoya/p/9758648.html chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己 ...

  4. 【F12】chrome浏览器中 F12 功能的简单介绍

    chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...

  5. chrome浏览器中 F12 功能的简单介绍

    chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...

  6. Chrome浏览器开发调试系列(一)

    // 计划写一个 Chrome 浏览器以及 调试器的系列文章,我慢慢写. 边写边改,发觉博客真是个打草稿的好地方. // 本文针对的是当前最新的浏览器Chrome34,如果你的版本不够新,希望你能够更 ...

  7. chrome浏览器console拓展用法

    chrome 浏览器console打印 使用CSS美化输出信息 console.log("%cThis will be formatted with large, blue text&quo ...

  8. 利用ChromeCROSS可以在chrome浏览器上调试跨域代码

    利用ChromeCROSS可以在chrome浏览器上调试跨域代码 1.下载ChromeCROSS文件,可百度下载,或者在我的百度云上下载:链接: https://pan.baidu.com/s/10_ ...

  9. Chrome浏览器如何调试移动端网页信息

    Chrome浏览器如何调试移动端网页信息 2017年08月12日 12:42:20 阅读数:835 最近在弄项目,用WebView加载一个页面,想追踪页面中一个按钮的点击事件.这个可能就需要调试这个页 ...

随机推荐

  1. 在ORACLE中实现SELECT TOP N的方法----[转]

    1.在ORACLE中实现SELECT TOP N 由于ORACLE不支持SELECT TOP语句,所以在ORACLE中经常是用ORDER BY跟ROWNUM的组合来实现SELECT TOP N的查询. ...

  2. jquery live 区别

    http://www.360doc.com/content/13/1222/22/14022539_339358149.shtml 开始的时候在jQuery.1.7.1中使用了.live()觉得很好用 ...

  3. 纯python自研接口自动化脚本更新版本，让小白也能实现0到1万+的接口自动化用例

    查看完整文章点击原文链接:纯python自研接口自动化脚本更新版本,让小白也能实现0到1万+的接口自动化用例 你是否还在用postman\jmeter做接口自动化吗?用python的开源框架[unit ...

  4. ExtJS定时和JS定时

    ExtJS定时 //定时刷新待办事宜状态 var task={ run:function(){ //执行的方法或方法体 }, interval:5*60*1000 //5分钟 } //定时启动 Ext ...

  5. JAVA-Servlet操纵方法

    此篇自用查询 存储数据的区域对象域对象的通用的方法:ServletContext context=getServletContext();获取ServletContext对象setAtrribute( ...

  6. 永久关闭windows更新步骤

    在搜索“web和windows”框中输入“服务” 在搜索结果中点击第一个,那个图标像齿轮的那个!如下图. 在打开的“服务”窗口中,我们找到windows update   找到”windows upd ...

  7. [基础-001]C++字符串转换(char*，const char*，string)

    1. string转const char* string str ="abc"; const char* charArr = str.c_str(); 2. const char* ...

  8. Python数据分析：pandas玩转Excel （二）

    1 对Excel文件的操作 方法一: 使用xlrd库或者xlwt库进行对excel表格的操作读与写: 方法二: pandas库同样支持excel的读写操作:且更加简便. 2 pd.read_excel ...

  9. 关于Backus-Naur Form巴克斯诺尔范式和扩展巴克斯范式的知识点和相关词语中英文对照

    巴克斯诺尔范式的相关词语中英文对照和知识点 syntax 语法 强调的是编程语言的组形式,例如一个句子中会包含表达式.陈述还有各种单元等等 semantics 语义 强调的是这个编程语言的实际含义,例 ...

  10. 【译】Welcome to C# 9.0

    C# 9.0正在形成,我想分享我们对添加到该语言下个版本的一些主要功能的看法.对于每个新版本的 C#,我们努力使常见的编码方案更加清晰和简单,C# 9.0 也不例外.这次的一个特别重点是支持数据形状的 ...