資訊專欄INFORMATION COLUMN
摘要：是現(xiàn)代瀏覽器的一種內(nèi)置功能，它允許開發(fā)者查看網(wǎng)頁上的錯誤和警告日志。使用命令與網(wǎng)頁進行交互。調(diào)試應(yīng)用程序并直接在瀏覽器中遍歷。檢查和分析網(wǎng)絡(luò)活動。結(jié)果輸出如下生產(chǎn)環(huán)境中刪除所有我們往往在開發(fā)環(huán)境才需要使用，并希望在生產(chǎn)環(huán)境去除這部分內(nèi)容。
簡評：只知道 console.log ？是時候提升一下對 console 的認(rèn)知了。
JavaScript console 是現(xiàn)代瀏覽器的一種內(nèi)置功能，它允許開發(fā)者：
查看網(wǎng)頁上的錯誤和警告日志。
使用 JavaScript 命令與網(wǎng)頁進行交互。
調(diào)試應(yīng)用程序并直接在瀏覽器中遍歷 DOM。
檢查和分析網(wǎng)絡(luò)活動。
基本上，你可以使用它來管理和監(jiān)控 JavaScript 在瀏覽器中正確運行。
Console.log, Console.error, Console.warn 和 http://Console.info
log( ) / error( ) / warn( ) 和 info( ) 是最常用的方法，你可以將多個參數(shù)傳遞給這些方法（輸出會使用空格分隔開來）。
Console.group
這個方法允許你對一些列 console.logs （error 和 info 同理）分組在一個可以折疊的組中,
用法非常簡單，只需要將 console.log 放置 console.group 和 console.groupEnd 中即可。
輸出如下：
Console.table
使用 console.log 來顯示一個 JSON 或者一個非常大的 JSON 數(shù)組的時候不便于閱讀，這時候可以使用 console.table 來顯示效果會更好。
輸出結(jié)果：
Console.count, Console.time 和 Console.timeEnd
console.time 和 console.timeEnd 可以方便的查看代碼段耗費的時間。console.count 可以用于記錄代碼執(zhí)行的次數(shù)：
輸出如下：
Console.trace 和 Console.assert
這個方法會在被調(diào)用的地方打印堆棧信息，例如：你正在創(chuàng)建一個 JS 庫，并且想告訴用戶錯誤產(chǎn)生的地方。
結(jié)果輸出如下：
生產(chǎn)環(huán)境中刪除所有 Consoles
我們往往在開發(fā)環(huán)境才需要使用 console，并希望在生產(chǎn)環(huán)境去除這部分內(nèi)容。這時候可以使用 uglifyjs-webpack-plugin 刪除生產(chǎn)環(huán)境不想不留的 consoles。
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
var debug = process.env.NODE_ENV !== "production";
.....
optimization: {
minimizer: !debug ? [
new UglifyJsPlugin({
// Compression specific options
uglifyOptions: {
// Eliminate comments
comments: false,
compress: {
// remove warnings
warnings: false,
// Drop console statements
drop_console: true
},
}
})] : []
}
原文：How you can improve your workflow using the JavaScript console
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/95884.html
摘要：組合的概念是非常直觀的，并不是函數(shù)式編程獨有的，在我們生活中或者前端開發(fā)中處處可見。其實我們函數(shù)式編程里面的組合也是類似，函數(shù)組合就是一種將已被分解的簡單任務(wù)組織成復(fù)雜的整體過程。在函數(shù)式編程的世界中，有這樣一種很流行的編程風(fēng)格。 JavaScript函數(shù)式編程，真香之認(rèn)識函數(shù)式編程(一) 該系列文章不是針對前端新手，需要有一定的編程經(jīng)驗，而且了解 JavaScript 里面作用域，閉...
摘要：值啟用了更詳細(xì)的堆棧保護檢查，它以犧牲一些性能的代價提供更精確的。這種可以由任何類型的編碼錯誤引起，但表現(xiàn)為函數(shù)指針錯誤，因為在運行時的預(yù)期表中無法找到函數(shù)。 翻譯：云荒杯傾本文是Emscripten-WebAssembly專欄系列文章之一，更多文章請查看專欄。也可以去作者的博客閱讀文章。歡迎加入Wasm和emscripten技術(shù)交流群，群聊號碼：939206522。 調(diào)試Emscri...
摘要：多個文件合并，減少請求數(shù)。生成的多了，表示文件的位置。轉(zhuǎn)換前的所有變量名和屬性名。自從年雙十一正式上線，累計處理了億錯誤事件，得到了金山軟件等眾多知名用戶的認(rèn)可。 部署前端之前，開發(fā)者通常會對代碼進行打包壓縮，這樣可以減少代碼大小，從而有效提高訪問速度。然而，壓縮代碼的報錯信息是很難Debug的，因為它的行號和列號已經(jīng)失真。這時就需要Source Map來還原真實的出錯位置了。 sho...
摘要：避免與進行比較避免推薦與進行比較的代碼，可以用以下技術(shù)進行替換如果值是一個應(yīng)用類型，使用操作符，檢查其構(gòu)造函數(shù)如果值是基本類型，使用檢查其類型如果是希望對象包含某個特定的方法名，則只用操作符確保指定名字的方法存在于對象上。 持續(xù)更新地址 https://wdd.js.org/js-best-pr... 1. 風(fēng)格 一千個讀者有一千個哈姆雷特，每個人都有自己的code style。...
閱讀 1917·2023-04-26 02:51
閱讀 2970·2021-09-10 10:50
閱讀 3239·2021-09-01 10:48
閱讀 3758·2019-08-30 15:53
閱讀 1917·2019-08-29 18:40
閱讀 474·2019-08-29 16:16
閱讀 2103·2019-08-29 13:21
閱讀 1876·2019-08-29 11:07
