從自己的medium同步過來
最近在網上瞎逛看到stack overflow上的這個老話題find out whether chrome console is open 很有意思，就決定實踐學習一下。
判斷控制台是否開啟這種需求雖然沒遇見過，但感覺還是有可能會遇到的，特別是做一些簡單的安全限制，稍微的提高一下安全門檻。
至於如何實現這個需求，大佬們也給出了解法
var devtools = /./;
devtools.tostring = function()
console.log('%c', devtools);
// devtools.opened will become true if/when the console is opened
複製**
function
checkopen() {}
checkopen.tostring = function() ;
console.log("%c", checkopen);
// checkopen.opened will become true if/when the console is opened
複製**
codepen請戳這裡
當開啟控制台後會顯示已開啟
原理學習
首先，這種方法其實是乙個hack來的，涉及的知識點包括型別轉換以及console.log api。
具體理解上就是首先先定義乙個具名空函式checkopen，然後覆寫它的tostring方法。
之後執行console.log('%c',checkopen)。當console.log()遇上%c這個substitution string時，第二個引數是字串，因此當傳入的是checkopen這個function是就會進行型別轉換，觸發checkopen的tostring方法。當然這裡也可以用console.log('%s',checkopen)。
而因為console.log()這個api只有在devtool開啟時才會真正的執行，也就是說只有控制台開啟後checkopen的tostring方法才會執行。
控制台開啟 => console.log執行 => 觸發型別轉換呼叫tostring複製**前面有說到stack overflow上的答案已經沒有作用(chrome 74)，是因為較新版本的chrome在console.log()正規表示式物件時，不會呼叫tostring或者valueof。
結語最基礎的語言知識，靈活運用組合起來後就能實現這種第一反應可能認為沒辦法實現的需求，果然基礎很重要，思維更重要啊
其他為了預防以後真的遇到這種需求。我就寫了小模組個發到npm了。
然後我就發現乙個做的更好更完善的包了devtools-detector，考慮了瀏覽器相容性以及console方法可能被hook的場景。
後續學習大佬的**後可以繼續豐富此文和優化自己的小模組。
參考資料
chrome控制台小技巧
對於大多數開發人員來說，chrome控制台最常用的命令就是 console.log 了，然後還有一些其他類似的命令，如 console.info 提示資訊 console.error 錯誤資訊 console.warn 警示資訊 然而，這些命令可能很多人都知道，然而，console.log 支援的多...
Chrome 控制台console的用法
google瀏覽器除錯時可能會用到 1 console.log用於輸出普通資訊 2 console.info用於輸出提示性資訊 3 console.error用於輸出錯誤資訊 4 console.warn用於輸出警示資訊 7 console.assert對輸入的表示式進行斷言，只有表示式為false...
如果來chrome控制台debugger除錯Vue
如果是單頁面，const vm new vue 的話，那麼可以用在控制台裡用vm 如果是sfc單檔案元件，那麼可以在控制台裡使用 vue devtools global hook 發現乙個問題，當使用 vue devtools global hook 時，如果使用模組，發現狀態可以用，如 vue d...