javascript基础学习系列三百五十二：把消息记录到控制台

最新推荐文章于 2024-03-08 05:00:00 发布

完美句号

最新推荐文章于 2024-03-08 05:00:00 发布

阅读量544

点赞数 25

文章标签： javascript 学习开发语言前端性能优化系统架构架构

本文链接：https://blog.csdn.net/wanmeijuhao/article/details/135982212

版权

所有主流浏览器都有 JavaScript 控制台，该控制台可用于查询 JavaScript 错误。另外，这些浏览器都支持通过 console 对象直接把 JavaScript 消息写入控制台，这个对象包含如下方法。
 error(message):在控制台中记录错误消息。
 info(message):在控制台中记录信息性内容。
 log(message):在控制台记录常规消息。
 warn(message):在控制台中记录警告消息。记录消息时使用的方法不同，消息显示的样式也不同。错误消息包含一个红叉图标，而警告消息包
含一个黄色叹号图标。可以像下面这样使用控制台消息:

function sum(num1, num2){
console.log('Entering sum(), arguments are ${num1},${num2}'); console.log("Before calculation");
const result = num1 + num2;
console.log("After calculation");
      console.log("Exiting sum()");
      return result;
    }

在调用 sum()函数时，会有一系列消息输出到控制台以辅助调试。

调试技术

把消息输出到 JavaScript 控制台可以辅助调试代码，但在产品环境下应该删除所有相关代码。这可以在部署时使用代码自动完成清理，也可以手动删除。
注意相比于使用警告框，打印日志消息是更好的调试方法。这是因为警告框会阻塞代码执行，从而影响对异步操作的计时，进而影响代码的结果。打印日志也可以随意输出任意多个参数并检查对象实例(警告框只能将对象序列化为一个字符串再展示出来，因此经常会看到 Object[Object]。

理解控制台运行时

浏览器控制台是个读取求值打印循环(REPL，read-eval-print-loop)，与页面的 JavaScript 运行时并发。这个运行时就像浏览器对新出现在 DOM 中的

JavaScript 运行时会限制不同窗口可以访问哪些内容，因而在所有主流浏览器中都可以选择在哪个窗口中执行 JavaScript 控制台输入。你所执行的代码不会有特权提升，仍会受跨源限制和其他浏览器施加的控制规则约束。
控制台运行时也会集成开发者工具，提供常规 JavaScript 开发中所没有的上下文调试工具。其中一个非常有用的工具是最后点击选择器，所有主流浏览器都会提供。在开发者工具的 Element(元素)标签页内，单击 DOM 树中一个节点，就可以在 Console(控制台)标签页中使用$0 引用该节点的 JavaScript 实例。它就跟普通的 JavaScript 实例一样，因此可以读取属性(如$0.scrollWidth)，或者调用成员方法(如$0.remove())。

使用JavaScript调试器

在所有主流浏览器中都可以使用的还有 JavaScript 调试器。ECMAScript 5.1 规范定义了 debugger 关键字，用于调用可能存在的调试功能。如果没有相关的功能，这条语句会被简单地跳过。可以像下面 24 这样使用 debugger 关键字:

function pauseExecution(){
console.log("Will print before breakpoint");
debugger;
console.log("Will not print until breakpoint continues");
}

在运行时碰到这个关键字时，所有主流浏览器都会打开开发者工具面板，并在指定位置显示断点。然后，可以通过单独的浏览器控制台在断点所在的特定词法作用域中执行代码。此外，还可以执行标准的代码调试器操作(单步进入、单步跳过、继续，等等)。
浏览器也支持在开发者工具的源代码标签页中选择希望设置断点的代码行来手动设置断点(不使用 debugger 关键字)。这样设置的断点与使用 debugger 关键字设置的一样，只是不会在不同浏览器会话之间保持。

在页面中打印消息

另一种常见的打印调试消息的方式是把消息写到页面中指定的区域。这个区域可以是所有页面中都包含的元素，但仅用于调试目的;也可以是在需要时临时创建的元素。例如，可以定义这样 log()函数:

function log(message) {
// 这个函数的词法作用域会使用这个实例
// 而不是window.console
const console = document.getElementById("debuginfo"); if (console === null){
        console = document.createElement("div");
        console.id = "debuginfo";
        console.style.background = "#dedede";
        console.style.border = "1px solid silver";
        console.style.padding = "5px";
        console.style.width = "400px";
        console.style.position = "absolute";
        console.style.right = "0px";
        console.style.top = "0px";
        document.body.appendChild(console);
}
      console.innerHTML += '<p> ${message}</p>';
    }

在这个 log()函数中，代码先检测是否已创建了调试用的元素。如果没有，就创建一个新

元素并给它添加一些样式，以便与页面其他部分区分出来。此后，再使用 innerHTML 属性把消息写到这个

中。结果就是在页面的一个小区域内显示日志信息。
注意与在控制台输出消息一样，在页面中输入消息的代码也需要从生产环境中删除。补充控制台方法
记住使用哪个日志方法(原生的 console.log()和自定义的 log()方法)，对开发者来说是一种负担。因为 console 是一个全局对象，所以可以为这个对象添加方法，也可以用自定义的函数重写已有的方法，这样无论在哪里用到的日志打印方法，都会按照自定义的方式行事。
比如，可以这样重新定义 console.log 函数:

// 把所有参数拼接为一个字符串，然后打印出结果 console.log = function() {
// 'arguments'并没有 join 方法，这里先把它转换为数组 const args = Array.prototype.slice.call(arguments); console.log(args.join(', '));
}

这样，其他代码调用的将是这个函数，而不是通用的日志方法。这样的修改在页面刷新后会失效，
因此只是调试或拦截日志的一个有用而轻量的策略。所有主流浏览器都有 JavaScript 控制台，该控制台可用于查询 JavaScript 错误。另外，这些浏览器都支持通过 console 对象直接把 JavaScript 消息写入控制台，这个对象包含如下方法。
 error(message):在控制台中记录错误消息。
 info(message):在控制台中记录信息性内容。
 log(message):在控制台记录常规消息。
 warn(message):在控制台中记录警告消息。记录消息时使用的方法不同，消息显示的样式也不同。错误消息包含一个红叉图标，而警告消息包
含一个黄色叹号图标。可以像下面这样使用控制台消息:

function sum(num1, num2){
console.log('Entering sum(), arguments are ${num1},${num2}'); console.log("Before calculation");
const result = num1 + num2;
console.log("After calculation");
      console.log("Exiting sum()");
      return result;
    }