从零开始前端学习[44]:工欲善其事必先利其器，了解下js的调试console下的函数，与alert弹出框

最新推荐文章于 2022-02-16 09:03:24 发布

^_^ 小小码nong

最新推荐文章于 2022-02-16 09:03:24 发布

阅读量1.4k

点赞数 1

分类专栏： # 1.从零开始挑战前端文章标签：前端调试 console alert

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_29924041/article/details/78452794

版权

1.从零开始挑战前端专栏收录该内容

57 篇文章 3 订阅

订阅专栏

工欲善其事必先利其器，了解下js的调试console下的函数，与alert弹出框

console
alert
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”]);

当然上面的一些只是一些相对来说比较常见的和常用的，其实也就和移动端使用的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>