打开调试台

方法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. 第三方动画库 Lottie嵌入记录

    预览网址 https://lottiefiles.com/preview   在Podfile文件中加入 pod 'lottie-ios’ pod install 把 lottie-ios加入到项目中 ...

  2. CF834D

    题目链接:http://codeforces.com/contest/834/problem/D 题目大意:将一个有n个数的数列分成k段,每段的价值为该段中不同数字的个数,求k段的最大总价值. 解题思 ...

  3. 【Java】Scanner类nextInt后使用nextLine无法读取输入

    首先,我们先介绍一下,在学习Java语言,对于字符串的输入,由于Scanner.next()函数无法输入空格及回车,此时,我们就必须要用Scanner.nextLine()解决这类问题, 在使用过程中 ...

  4. 转载 配置vue项目

    Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本 ...

  5. OpenStack知识点详解

    一:云计算     一.起源 1. 云计算这个概念首次在2006年8月的搜索引擎会议上提出,成为了继互联网.计算机后信息时代的又一种革新(互联网第三次革命). 2. 云计算的核心是将资源协调在一起,使 ...

  6. python的性能测试(timeit)

    import timeit def test(): lista = [] listb = [] for i in range(100): lista.append(i) for i in range( ...

  7. SOFA入门

    简介 scalable open financial architecture stack , 可扩展开放的金融架构栈: github: https://github.com/sofastack/so ...

  8. Java——MVC模式

    MVC:Model View Controller 一般用于动态程序设计,实现了业务逻辑和表示层分离 Model:掌控数据源-->程序员编写程序或者实现算法,数据库人员进行数据库操作等:响应用户 ...

  9. [PHP自动化-进阶]004.Snoopy VS CURL 模拟Discuz.net登陆

    引言:采集论坛第一步就是要模拟登陆,由于各个站点登录表单各不相同,验证方式又是多种多样,所以直接提交用户名密码到登录页面就比较繁琐. 所以我们采用cookie来模拟登陆无疑是最佳捷径. 今天我们要处理 ...

  10. ES6-常用四种数组

    1.map 1.1 个人理解 映射 一个对一个 例如:[45,57,138]与[{name:'blue',level:0},{name:'zhangsan',level:99},{name:'lisi ...