从零开始前端学习[44]:工欲善其事必先利其器,了解下js的调试console下的函数,与alert弹出框
来源:互联网 发布:知乎中科大软件学院 编辑:程序博客网 时间:2024/06/05 00:24
工欲善其事必先利其器,了解下js的调试console下的函数,与alert弹出框
- console
- alert
- js代码相关的注意事项
提示:
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041
console下的函数的使用
console对象提供对浏览器控制台的介入,不同的浏览器的工作方式也是不一样
的,这里主要去介绍一些大都会提供的一些接口,console对象可以在任何全局对象中访问,参考下面的表格
当然上面的一些只是一些相对来说比较常见的和常用的,其实也就和移动端使用的Log.i等一些日志输出差不多而已
具体的使用其实可以多多的参考: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>
显示的效果如下所示:
阅读全文
1 0
- 从零开始前端学习[44]:工欲善其事必先利其器,了解下js的调试console下的函数,与alert弹出框
- 从零开始前端学习[56]:js下的函数
- 了解windows下Node.js的调试
- IE下的console调试
- javascript中使用console与alert调试的差别
- 从零开始前端学习[49]:js函数的初步认识
- 【前端】--console.log和alert的区别
- firefox下ExternalInterface.call调用js的alert函数问题
- JS alert() 弹出框乱码的问题
- JavaScript学习笔记-alert()与console.log()的区别
- console.log火狐下的调试
- 非常好用的前端调试函数console.log()
- 在app_code 建立的.cs文件下alert弹出窗口
- javascript的alert()与console.log()
- alert() 与 console.log() 的区别
- 如何设置WebView支持js的Alert,Confirm,Prompt函数的弹出提示框.
- Win32和mfc下弹出console窗口的方法
- window下MySql定时弹出Installer Console的窗口
- Android闹钟设置的解决方案
- 机器学习相关基础~
- 2017.11.05离线赛总结
- 蓝桥杯 算法提高 现代诗如蚯蚓
- 习题5
- 从零开始前端学习[44]:工欲善其事必先利其器,了解下js的调试console下的函数,与alert弹出框
- 第一次注册
- 第8节:scala常用集合Map和Tuple
- 素数
- react native踩坑记(创建指定的React-Native版本)
- python之折线图绘制体验
- java se--2.数组-1.基础
- 算法总结
- 卸载安装SqlServe2012需要注意的重要细节