打开调试台

方法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. Jenkins-Sonar集成配置及注意点

    首先说说关于Jenkins集成Sonar的相关配置:我jenkins与Sonar不在同一个服务器上! 先现在 SonarQube Scanner 插件. SonarQube Servers:系统配置 ...

  2. Mac更新系统后提示xcrun error

    更新mac os后无法运行git,gcc等命令,出现missing xcrun错误. 这是因为更新系统后会卸载xcode,重新安装后会缺失xcode的命令行工具(command line tools) ...

  3. CF808E Selling Souvenirs

    题目链接: http://codeforces.com/contest/808/problem/E 题目大意: Petya 有 n 个纪念品,他能带的最大的重量为 m,各个纪念品的重量为 wi,花费为 ...

  4. 愉快地使用Windows Terminal

    有了Windows Terminal 你再也不需要其他任何终端了-- 下载 直接到Windows 10 自带的应用商店下载安装.参考: https://github.com/Microsoft/Ter ...

  5. mybatis的多表联查

    多对一连表查询简单记录

  6. HDFS设计思想、元数据、简单JAVAAPI操作HDFS

    一. 设计思路 分布式文件系统 在Hadoop中文件系统是一个顶层的抽象. 分布式文件系统相当与对文件系统进行了一个扩展(类似于java中的接口). HDFS是分布式文件系统的一个实现,分布式文件系统 ...

  7. LinkedList为什么增删快、查询慢

    List家族中共两个常用的对象ArrayList和LinkedList,具有以下基本特征. ArrayList:长于随机访问元素,中间插入和移除元素比较慢,在插入时,必须创建空间并将它的所有引用向前移 ...

  8. pdf去水印，pdf解密，pdf转MarkDown

    pdf去水印,在转Markdown文件 首先我们要有版权的敬畏之心,这里只是给大家介绍一下思路,请合理使用! 1.pdf去水印 下载:悦书PDF阅读器,注意免费免费!!!!(后期就不知道了,目前是免费 ...

  9. 设计一个多功能的MyTime类 代码参考

    #include <iostream> #include <cstdio> using namespace std; class MyTime { private: int h ...

  10. [Python3]为什么map比for循环快

    实验结论 如果需要在循环结束后获得结果,推荐列表解析: 如果不需要结果,直接使用for循环, 列表解析可以备选; 除了追求代码优雅和特定规定情境,不建议使用map 如果不需要返回结果 这里有三个pro ...