打开调试台

方法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. 关于php中数据提交到当前页面action的问题

    关于php中数据提交到当前页面action的问题 2011-06-21 17:45杨超★杰伦 | 分类:PHP | 浏览695次 php中数据提交到当前页面,有人action=“<?php ec ...

  2. TCO14286 TriangleTriples

    题目链接:https://vjudge.net/problem/TopCoder-14286 知识点: 组合数学.容斥原理 题目大意: 给出 \(A,B,C\),问有多少个有序三元组 \((a,b,c ...

  3. 【Nginx】centos7 yum命令安装nginx

    安装nginx 首先我们需要使用root用户进行操作 第一步:添加nginx存储库 sudo yum install epel-release 出现如下图说明成功: 第二步:安装nginx sudo ...

  4. airflow的安装和使用 - 完全版

    之前试用了azkaban一小段时间,虽然上手快速方便,但是功能还是太简单,不够灵活. Airflow使用代码来管理任务,这样应该是最灵活的,决定试一下. 我是python零基础,在使用airflow的 ...

  5. 关于VMware问题:无法获得 VMCI 驱动程序的版本: 句柄无效。驱动程序“vmci.sys”的版本不正确

    有的童鞋可能安装虚拟机时出现了下边这样的错误,莫慌,下面咋们来解决!!! 1.首先,找到你的安装虚拟机的目录下有一个.vmx的文件 找到这个文件,用编辑器打开,将该值改为FALSE即可!

  6. Java四种访问修饰符

    Java 四种访问权限 一.概述 访问等级比较:public > protected > default > private 无论是方法还是成员变量,这四种访问权限修饰符作用都一样 ...

  7. eatwhatApp开发实战(六)

    上次,我们为app添加了本地存储的功能,但会发现一但退出app则存储的商家集合就消失,但其实本地已经存储了记录只是没去读取罢了. 接下来我们来实现这个功能. /** * 获取本地数据 */ priva ...

  8. 如何管理win系列服务器,win10 pro如何 使用远程桌面

    远程桌面,大家都理解,专业的运维人员都是连接上百台服务器进行操作管理工作. 先介绍一款专业的远程桌面管理工具:iis7远程桌面批量管理  win10 pro如何 使用远程桌面? 一. 首先在win10 ...

  9. (Java实现) 零件分组

    零件分组(Stick)-动态规划-中高级 Case Time Limit:1000MS Time Limit: 3000MS Memory Limit: 65536K Total Submission ...

  10. Java实现洛谷 P1873 砍树(StreamTokenizer+IO+二分)

    P1873 砍树 输入输出样例 输入 5 20 4 42 40 26 46 输出 36 PS: get新知识,以前只知道STringTokenizer并没有了解过StreamTokenizer,这次才 ...