Chrome浏览器 Console调试台的简单使用
打开调试台
方法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调试台的简单使用的更多相关文章
- chrome 浏览器 console 加入 jquery 测试调试 一介布衣
chrome 浏览器 console 加入 jquery 测试调试 一介布衣 var jquery = document.createElement('script'); jquery.src = ...
- Chrome浏览器及调试教程
==>(微信公众号:IT知更鸟)欢迎关注<^>@<^> Chrome浏览器及调试教程 在web开发过程中,我们在写JavaScript脚本时难免会遇到各种bug,这时,我 ...
- [转]chrome浏览器中 F12 功能的简单介绍
本文转自:https://www.cnblogs.com/zhuzhubaoya/p/9758648.html chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己 ...
- 【F12】chrome浏览器中 F12 功能的简单介绍
chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...
- chrome浏览器中 F12 功能的简单介绍
chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...
- Chrome浏览器开发调试系列(一)
// 计划写一个 Chrome 浏览器以及 调试器的系列文章,我慢慢写. 边写边改,发觉博客真是个打草稿的好地方. // 本文针对的是当前最新的浏览器Chrome34,如果你的版本不够新,希望你能够更 ...
- chrome浏览器console拓展用法
chrome 浏览器console打印 使用CSS美化输出信息 console.log("%cThis will be formatted with large, blue text&quo ...
- 利用ChromeCROSS可以在chrome浏览器上调试跨域代码
利用ChromeCROSS可以在chrome浏览器上调试跨域代码 1.下载ChromeCROSS文件,可百度下载,或者在我的百度云上下载:链接: https://pan.baidu.com/s/10_ ...
- Chrome浏览器如何调试移动端网页信息
Chrome浏览器如何调试移动端网页信息 2017年08月12日 12:42:20 阅读数:835 最近在弄项目,用WebView加载一个页面,想追踪页面中一个按钮的点击事件.这个可能就需要调试这个页 ...
随机推荐
- Poj2109 (2) k^n = p.
二分法,由p最大值最小值的中间值开始猜k,通过比较pow(k,n)与p的大小来进一步精确k,直到找到. #include<stdio.h> #include<math.h> # ...
- Maven——pom.xml文件报错:Missing artifact:jar包
原因:该错误原因为maven库中jar包无法更新 解决方法:找到maven库中对应的jar包路径,删除文件夹中的红框中的三个文件
- Android_存储之SharedPreferences
一.概述 SharedPreferences是一种轻量级的数据存储方式,采用键值对的存储方式. SharedPreferences只能存储少量数据,大量数据不能使用该方式存储,支持存储的数据类型有bo ...
- HttpServletRequestWrapper 类&过滤指定文字
HttpServletWrapper 和 HttpServletResponseWrapper 1). Servlet API 中提供了一个 HttpServletRequestWrapper 类来包 ...
- angularjs 路由切换回到顶部
angularjs路由切换 页面不会回到顶部 问题: 在angularjs中 ui-sref或者$state.go(),通过路由切换页面,发现新打开的路由页面仍然停留在上一次的路由页面访问的位置. ...
- word dde payload
payload: ctrl+F9 {DDEAUTO c:\\windows\\system32\\cmd.exe "/k calc.exe" } Since this techni ...
- 使用css实现loading的加载
使用css实现loading的加载的效果图 html代码 <div id="caseVerteClaire"> <div id="transform&q ...
- (String),toString(),String.valueOf()
String.valueOf("")的源码:(推荐这种写法) 注意:obj问null时,返回值是字符串"null" toString("") ...
- ASP.NET MVC 数据传递进阶 从数据库拿到数据后的三种方式
目录 回顾 数据 显示 因为这个小练习有EF的一些东西,我们来回顾一下. 一.回顾 回顾一点EF的知识怎么生成数据库模型. 1.首先我们在Models文件夹右键添加新建项,在数据分栏下有ADO.NET ...
- Java实现 LeetCode 720 词典中最长的单词(字典树)
720. 词典中最长的单词 给出一个字符串数组words组成的一本英语词典.从中找出最长的一个单词,该单词是由words词典中其他单词逐步添加一个字母组成.若其中有多个可行的答案,则返回答案中字典序最 ...