關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

閒聊~隱藏 console 輸出行數

一般網頁設計中,我們會使用到 console.log 在 Chrome Developer Tools輸出一些字串,
並且可以在右邊看到這個console.log的位置

如果想隱藏 log 的來源行數
讓其他用戶在 Chrome Developer Tools 無法得知程式的位置,該怎麼做呢?

取得 console.log

首先,先從取得 console.log 來了解他的屬性

我們先舉幾個例子,如果想透過一個變數來存取 console.log 並且輸出一段文字,該怎麼處裡呢?

首先,是一個錯誤的用法

const log = console.log;

log('hello world');//Error

再來看正確的使用方式

const log = console.log.bind(console);

log('hello world');//hello world

主要在於,console 是物件,而 .log 則是物件中的方法

console.log(typeof(console));//object


console.log(typeof(console.log));//function

可以以這樣的方式來檢視

//console object

const console = {
    log: ()=>{
    //log function

  }
}

const logI = console.log;//錯誤


const logII = console.log.bind(console);//正確

當我們想用一個變數來存取 .log 時,並不能直接用第一個方式
因為,log 方法必須要在 console 物件中執行才會成功。
變數直接存取 log function 的方式,會造成 log function中的 this 會找不到 console,
所以在變數儲存時,才需要透過 bind 的方式將 console 帶入 log 作為 this

另外,我們如果直接在 console 介面直接使用 bind ,接著傳入參數,會無法輸出正確結果

console.log.bind(console, 'hello world')  //ƒ log() { [native code] }

這時必須要用setTimeout

setTimeout(console.log.bind(console, 'hello world')) //hello world

隱藏輸出行數的作法

要隱藏輸出行數,一定要使用 setTimeout 來處理,寫法如下:

setTimeout(console.log.bind(console, 'hello world'));

當我們省略了 setTimeout 第二個時間參數,其實就會自動套用預設 0
setTimeout(fn, 0)

雖然時間為 0,但是只要使用 setTimeout,就會自動等原本的js項目執行完畢才會開始處理
這裡,我們透過 直接consolel.log,以及透過 setTimeout、windows.onload 來處理
觀察這裡面的順序,就會清楚很多

window.onload = function(){console.log(0)}

setTimeout(function(){
    console.log(1)
})

console.log(2);


setTimeout(function(){
    console.log(3)
})

console.log(4);

/**
 * 輸出: 2,4,0,1,3 
 */


// setTimeout(console.log.bind(console,'hello world'));




如果這篇文章對你有幫助,請在這裡點個讚



最新文章推薦