从零开始前端学习[44]:工欲善其事必先利其器,了解下js的调试console下的函数,与alert弹出框
2017-11-06 21:51
651 查看
工欲善其事必先利其器,了解下js的调试console下的函数,与alert弹出框
consolealert
js代码相关的注意事项
提示:
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041
console下的函数的使用
console对象提供对浏览器控制台的介入,不同的浏览器的工作方式也是不一样的,这里主要去介绍一些大都会提供的一些接口,console对象可以在任何全局对象中访问,参考下面的表格
接口方法 | 含义 | 使用方式 |
---|---|---|
assert | 主要是断言的形式去输出,断言就是假设某个逻辑成立,如果成立则为true,如果不成立,则为false | console.assert(c==3, “Assertion of score length failed”); |
clear | 清空控制台的输出信息 | console.clear(); |
count | 输出count()被调用的次数,此函数接受一个可选参数的label,可以在某个函数中去定义 | console.count(); |
dir | 在控制台中显示指定JavaScript对象的属性,并通过类似文件树样式的交互列表显示 | console.dir(object); |
dirxml() | 显示一个明确的XML/HTML元素的包括所有后代元素的交互树。 如果无法作为一个element被显示,那么会以JavaScript对象的形式作为替代。 它的输出是一个继承的扩展的节点列表,可以让你看到子节点的内容 | console.dirxml(object); |
error() | 向web控制台输出一条错误消息 | console.error(“error”); |
group | 在 Web控制台上创建一个新的分组.随后输出到控制台上的内容都会被添加一个缩进,表示该内容属于当前分组,直到调用console.groupEnd()之后,当前分组结束. | console.group(); |
info() | 向web控制台输出一个通知信息。在Firefox和Chrome中,web控制台的日志中的项目旁边会显示一个小的‘I‘图标 | console.info(obj1 [, obj2, …, objN]); |
log | 向web控制台输出一条消息. | console.log(obj1 [, obj2, …, objN); |
time | 你可以启动一个计时器(timer)来跟踪某一个操作的占用时长 | console.time(timerName); |
timeStamp | 向浏览器的 Timeline 或者 Waterfall 工具添加一个标记。这样可以让你将代码中的一个点和其他在时间轴上已记录的事件相关联,例如布局事件和绘制事件等 | console.timeStamp(label); |
warn | 向 web 控制台输出一条警告信息. | console.warn(obj1 [, obj2, …, objN]); |
trace | 在页面console文档中查看堆栈跟踪的详细介绍和示例 | console.trace(); |
table | 这个方法接收一个强制的参数,它必须是一个数组或者是一个对象,还可以接受一个额外的参数描述表格的列数 | console.table([“apples”, “oranges”, “bananas”]); |
具体的使用其实可以多多的参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Console/table
alert弹出框的使用
弹出框就不多说了,直接一个alert就出来了,但是有时候这种弹出框可不仅仅只是用来显示文字的,比如有时候一个网页的用户名和密码的显示,也是使用弹出框的形式进行弹出的。代码test部分,很简陋:主要是看信息的:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8--> <meta name="Generator" content="EditPlus®"> <!--编辑器的名称--> <meta name="Author" content="作者是谁"> <meta name="Keywords" content="关键词"> <meta name="Description" content="描述和简介"> <style type="text/css"> body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;} ul,ol{margin: 0; list-style: none; padding: 0;} a{ text-decoration: none; } *{ margin: 0; padding: 0; } .fl_l{float: left} .clearfix:after{ content: ""; display: block; clear: both; } .main{width: 700px;margin: 50px auto;box-shadow: 0 0 10px 0px blue} p{width: 150px;height: 150px;box-shadow: 0 0 10px 0px deeppink;text-align: center;line-height: 150px;margin: 10px} </style> </head> <body> <div class="main clearfix"> <p class="fl_l" id="p_console_log">点我看console信息</p> <p class="fl_l" id="p_console_clear">清空控制台的信息</p> <p class="fl_l" id="p_console_dirxml">dirxml <a href="" style="color: red">dirxml</a></p> <p class="fl_l" id="p_console_error">输出error信息</p> <p class="fl_l" id="p_console_info">输出info信息</p> <p class="fl_l" id="p_console_table">输出table信息</p> <p class="fl_l" id="p_console_warn">输出warn信息</p> <p class="fl_l" id="p_console_trace">输出trace信息</p> <p class="fl_l" id="p_alert">点我能有弹出框</p> </div> <script> document.getElementById("p_console_log").onclick = function () { console.log("点我可以去查看调试信息") } document.getElementById("p_console_clear").onclick = function () { console.clear("clear log") } document.getElementById("p_console_dirxml").onclick = function () { console.dirxml(this) } document.getElementById("p_console_error").onclick = function () { console.error("error") } document.getElementById("p_console_info").onclick = function () { console.info("p_console_info") } document.getElementById("p_console_warn").onclick = function () { console.info("p_console_warn") } document.getElementById("p_console_trace").onclick = function () { console.info("p_console_trace") } document.getElementById("p_console_table").onclick = function () { console.table(["a","b","c"]); function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } var me = new Person("John", "Smith"); console.table(me); } document.getElementById("p_alert").onclick = function () { alert("查看弹出框") }; </script> </body> </html>
显示的效果如下所示:
相关文章推荐
- 从零开始前端学习[56]:js下的函数
- 从零开始前端学习[49]:js函数的初步认识
- 从零开始前端学习[45]:js中的所谓的事件类型,鼠标事件,表单事件,键盘事件以及系统事件
- js - 关于部分浏览器内置函数console详解(用开发调试的利器)
- javascript console 函数详解 js开发调试的利器
- 从零开始前端学习[53]:js中的获取元素的方式
- 从零开始前端学习[50]:js操作标签属性,读写属性标签
- 写js或者jquery的时候最重要的调试,再也不用alert弹出对象
- JS弹出对话框函数alert(),confirm(),prompt()
- [转]javascript console 函数详解 js开发调试的利器
- js - 关于部分浏览器内置函数console详解(用开发调试的利器)
- javascript console 函数详解 js开发调试的利器
- Ferris这个教程学习笔记:js示例2.2:函数接收参数并弹出
- js - 关于部分浏览器内置函数console详解(用开发调试的利器)
- 【JS】利用 Console 来学习、调试JavaScript
- 从零开始前端学习[52]:js中的数据类型以及没有数据类型的数据类型typeof
- javascript console 函数详解 js开发调试的利器
- js - 关于部分浏览器内置函数console详解(用开发调试的利器)
- 从零开始前端学习[48]:js中的变量和this的初步认识
- 20180302JS的深入学习:函数的深入用法、函数的参数、JS内置对象、动态时钟及验证表单的练习、JS原型链的简单了解