打开调试台

方法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. 云小课 | 搬迁本地数据至OBS，多种方式任你选

    摘要:搬迁本地数据至OBS,包括OBS工具方式.CDM方式.DES磁盘方式.DES Teleport方式和云专线方式,每种方式特点不同,本节课我们就一起看看有什么区别. 已有的业务数据可能保存在本地的 ...

  2. BZOJ1021

    转载:http://www.cnblogs.com/Asm-Definer/p/4372749.html 1021: [SHOI2008]Debt 循环的债务 Time Limit: 1 Sec  M ...

  3. Pygame 框架安装教程（Python3.6为例）

    1.python版本是3.6,最新的pygame是1.9.3,这两个最好都用32位的. pygame1.9.3下载地址:http://www.lfd.uci.edu/~gohlke/pythonlib ...

  4. linux：安装

    安装准备 1.虚拟机:VMware® Workstation 12 Pro 2.系统:CentOS-6.5-i386-bin-DVD1.iso 新建虚拟机 网络设置: NAT:配置好后Windows与 ...

  5. 实验二：Linux系统简单文件操作命令

    項目 内容 这个作业属于哪个课程() 课程链接 这个作业的要求在哪里 实验要求 学号-姓名 17043133-木腾飞 作业学习目标 学习在Linux系统终端下进行命令行操作: 学习掌握常用命令行操作并 ...

  6. 0521Day03命名规范 Data函数 可变长参数 枚举类型

    [重点] 命名规范 枚举类型 Date函数 可变长参数 pirnt,println 命名规范 1. 驼峰命名法:main,username,setUsername 用于变量.方法的命名 2. Pasc ...

  7. SpringBoot打包Docker镜像

    构建spring boot项目 本地测试访问 打成jar包 在本地运行jar包测试 到这一步就证明jar包没问题 idea下载一个插件 在这创建一个Dockerfile文件 安装插件后会高亮显示. 在 ...

  8. 【C++】VS Code配置

    0.前言 本文已配置C++环境为例,本文主要是面向刚开始接触VS Code的朋友,采用生成默认配置任务的方法,在编写本文过程中大量参考了官方文档,感兴趣的朋友可直接前往传送门. 环境: win10 + ...

  9. [JavaWeb基础] 021.Action中result的各种转发类型

    在struts2中, struts.xml中result的类型有多种,它们类似于struts1中的forward,常用的类型有dispatcher(默认值).redirect.redirectActi ...

  10. shell日期格式化、加减运算

    #!/bin/bash echo i love you输出:i love you =======================================反引号的作用============== ...