打开调试台

方法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. c# 优化代码的一些规则——优先隐式类型[一]

    前言 说到底就是优先使用var,这个关键字,在c# 3.0中出现了. 首先要确认几点,一个就是var 是静态变量,而不是动态变量,也就是说使用var 你是不必去担心性能问题得, 百度百科: 1)静态存 ...

  2. SVN强制添加备注

    1.进入仓库project1/hooks目录,找到pre-commit.tmpl文件 cp pre-commit.tmpl pre-commit 2.编辑pre-commit文件, 将: $SVNLO ...

  3. 数据库对应的jdb连接

    数据库Database URLJDBC Driver class驱动包 Mysqljdbc:mysql://localhost:port/DBnamecom.mysql.jdbc.Drivermysq ...

  4. 使用VuePress搭建个人博客

    使用VuePress搭建个人博客 VuePress 是一个基于 Vue 的静态网站生成器.其中主要用到:Vue,VueRouter,Webpack. 类似的工具:hexo 基于 Markdown 语法 ...

  5. WebStorm 2019.3.1 破解 永久使用 亲测100%成功

    声明:本教程 WebStorm 破解补丁.激活码均收集于网络,请勿商用,仅供个人学习使用,如有侵权,请联系作者删除. 前言 今天问公司前端的美眉,你的激活码哪里来的,她说淘宝买的,我说给我用一下,当时 ...

  6. [工具推荐]003.Tortoisegit使用教程(补充)

    前文介绍:       在前文<[工具推荐]003.Tortoisegit使用教程>中详细介绍了如何使用Tortoisegit的使用,但是大家使用后反映一点,就是每次操作都需要输入账号名和 ...

  7. 【Python】自己写日志功能

    Python有自带的logging模块,用于日志记录,功能很强大,但不好用,使用挺麻烦的,而且发现了几个bug,调用了一个logger.warning()一次,结果日志文件中出现了n行记录,且逐渐变成 ...

  8. nodejs安装及环境变量的配置

    首先,nodejs安装到C盘的 建议安装到其他盘里,这是为了防止电脑出故障后C盘下载的东西会缺失 第一次安装nodejs的,第一步打开“nodejs官网:https://nodejs.org/zh-c ...

  9. 在 MacOS 中使用 multipass 安装 microk8s 环境

    在 MacOS 中使用 multipass 安装 microk8s 环境 Multipass & MicroK8s 介绍 What is Kubernetes? Kubernetes clus ...

  10. & vue项目中的rem适配

    有个朋友问我在vue项目怎么做rem适配,我工作中都是用的dva,但是我感觉道理都是一样的,换汤不换药.配完就顺手写下来吧! 需要安装两个插件库 lib-flexible和px2rem-loader ...