js中調試技巧-打印日志信息

js中調試技巧-打印日志信息

平常調試代碼的時候, 大部分情況下我們會采用 console.log 的形式進行處理.

但是這個是非常費事費力的一件事情. 因為這個地方是要進行代碼的修改, 然后經過代碼的 reload 之后,

是一件非常低效的事情. 而我們程序員是不會做低效的事情的

針對自己在工作中的場景, 總結了一下幾種比較搞笑的方法進行打印

1. 使用 dev-tools 打印變量信息

chrome 調試工具非常強大, 我們可以首先采用其中的調試工具來進行打印

1. watcher 選擇調試的代碼變量或者表達式, 將其加入到 觀察隊列中, 運行到此處就會顯示出信息
2. 增加 斷點log , 看圖說話, 另外的幾個功能也非常實用. 跟增加條件斷點類似, 不過這里的會在控制台直接打印出來

   要說的是: 如果想設置一些額外信息, 也可以將變量掛載到 windows 全局上, 然后在下一個斷點進行使用, 非常方便
   {% asset_img logpoint.png %}

3. 手工輸入 console.log. 可以實現將需要處理的變量掛載到 全局 windows 上去.
   比如我需要觀察 obj 對象, 然后我可以這個樣子

```js

    window.obj = obj;

```

這樣處理的時候, 只要在控制台直接輸出 `console.log(window.obj)` 就可以了.

2. 打印調用棧信息

   本來寫這個主題就是打印堆棧信息的, 一下子變成打印日志信息了....

   1. console.trace(). 專事專辦, 這個方法就是可以用來記錄的.

   2. 如果不支持, 我們可以通過 arguments 中的 callee 和 caller 進行 (如果 es6 禁用掉了的話..., 那 console.trace 方法肯定支持)

      方法如下

        function trace () {
            var currentFunction = arguments.callee;
            var caller = currentFunction.caller;
            //當然你也可以增加層級控制, 見下邊
            while(caller) {
                console.log(caller);
                caller = caller.caller;
            }
        }
      
        //增加一下層及控制
        //level: number
        function trace(level = 0) {
            var currentFunction = arguments.callee;
            var caller = currentFunction.caller;
            var count = 0;
            while(caller && count < level) {
                console.log(caller);
                caller = caller.caller;
                count ++;
            }
        }
      

簡單說下 callee 和 caller

callee 其實就是方法自己, 通過 arguments 可以訪問到
caller 指向調用當前方法的對象

所以, 比如以下代碼

function a() {
    console.log(arguments.callee.caller.caller)
}

function b() {
    a();
}

function c() {
    b();
}

c();

就會打印

ƒ c() {
b();
}

其他的一個小技巧

chrome 還支持將打印的日志直接保存成文件, 便於統一通過 ide 進行分析

在打印輸出的日志上邊 右鍵 另存為即可~