WEB调试工具,神奇的console

翻译 2016年08月31日 15:06:08

在浏览器面板按F12就可以进入调试界面,里面的很多功能对前段开发用处很大。

Element:主要是用来调试网页中的html标签代码和css样式代码
Network:查看网页的http通信情况,包括MethodTypeTimeline(网络请求的时间响应情况)等
Source:查看JS文件、调试JS代码
Timeline:查看js的执行时间,页面元素渲染时间等
Profiles:用来查看网页的性能,比如CPU和内存消耗
Resources:用来查看加载的各种资源文件,比如js、css、图片等
Audits:可以分析当前网页,可以快速的分析出哪些资源被使用、哪些资源没有使用,然后提出建议
Console:可以查看错误信息、打印调试信息、调试js代码,还可以当作Javascript API查看

下面来详细的介绍console的功能和用法:
(1)如果想清空控制台,可以点击左上角那个 Chrome 控制台console的用法来清空,当然也可以通过在控制台输入console.clear()来实现清空控制台信息。
这里写图片描述

(2)现在假设一个场景,如果一个数组里面有成百上千的元素,但是你想知道每个元素具体的值,这时候想想如果你用alert那将是多惨的一件事情,因为alert阻断线程运行,你不点击alert框的确定按钮下一个alert就不会出现。下面我们用console.log来替换,感受一下它的魅力。
这里写图片描述

(3)console.count,当你想统计代码被执行的次数
这里写图片描述

(4)美元符号命令返回最近一次表达式执行的结果,什么意思?在页面右击选择审查元素,然后在弹出来的DOM结点树上面随便点选,这些被点过的节点会被记录下来,而0DOM1返回的是上上次点选的DOM节点,最多保存了5个,如果不够5个,则返回undefined。
这里写图片描述

(5)最后说一下chrome控制台一个简单的操作,如何查看页面元素,看下图就知道了
这里写图片描述

Web前端调试工具——神奇的Console

前言       先上图:不知道有多少人发现,在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息:            今天要给大家介绍的是Web前端调试工具,应该...
  • zwk626542417
  • zwk626542417
  • 2014年12月29日 21:18
  • 25738

web移动端调试工具Eruda

Eruda github地址:  https://github.com/liriliri/eruda/blob/master/doc/README_CN.md Eruda 是一个专为手机网页...
  • w1358626027
  • w1358626027
  • 2017年11月07日 23:35
  • 130

神奇的console

前言       先上图:不知道有多少人发现,在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息:            今天要给大家介...
  • zona_wzq
  • zona_wzq
  • 2016年06月08日 13:44
  • 202

前端-调试工具

常用的调试工具有Chrome浏览器的调试工具,火狐浏览器的Firebug插件调试工具,IE的开发人员工具等。它们的功能与使用方法大致相似。Chrome浏览器简洁快速,功能强大这里主要介绍Chrome浏...
  • becoming_Okami
  • becoming_Okami
  • 2016年08月23日 15:03
  • 1465

微信手机端调试工具-微信Web开发者工具使用教程

微信手机端调试工具[下载地址] (https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html) 进入后的页面 ...
  • ktutu
  • ktutu
  • 2017年04月14日 21:03
  • 12191

谷歌浏览器F12前端调试工具 Console

前言       先上图:不知道有多少人发现,在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息:     ...
  • u013380777
  • u013380777
  • 2017年07月18日 22:26
  • 3842

PHP5调试工具debugConsole

监控变量,跟踪变量的变化,打断点,记录日志,这些功能都有,在运行的时候直接这些数据输出到一个js生成的弹窗里,工具地址 http://www.debugconsole.de/...
  • vince6799
  • vince6799
  • 2011年12月23日 09:01
  • 1897

kafka web console监控软件的安装

1、安装kafka web console软件前先安装sbt 安装: 我的系统为centos7故采用官方提供的在线安装: curl https://bintray.com/sbt/rpm/rpm...
  • yjh314
  • yjh314
  • 2017年08月28日 15:11
  • 342

如何在手机浏览器使用调试工具

手机端网页的调试致谢:这个使用的工具来自eruda,在此感谢我的舍友超哥告诉我这个强大的工具 gtihub地址: https://github.com/liriliri/eruda 效果预览 ...
  • u011456337
  • u011456337
  • 2016年06月06日 13:05
  • 13997

前端开发必备工具-网页调试工具

前端开发必备工具-网页调试工具 在前端开发中我们经常会要调试页面,主要html、css调试和js调试,这里整理一些工具: 一、firefox网页调试插件 1.firefox插件Fireb...
  • bamboolsu
  • bamboolsu
  • 2015年11月17日 23:40
  • 4870
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WEB调试工具,神奇的console
举报原因:
原因补充:

(最多只允许输入30个字)