JavaScript Debug 之 Console

RaoMeng 發布于2019-08-22 18:27 / 1969人閱讀

摘要：是現代瀏覽器的一種內置功能，它允許開發者查看網頁上的錯誤和警告日志。使用命令與網頁進行交互。調試應用程序并直接在瀏覽器中遍歷。檢查和分析網絡活動。結果輸出如下生產環境中刪除所有我們往往在開發環境才需要使用，并希望在生產環境去除這部分內容。

簡評：只知道 console.log ？是時候提升一下對 console 的認知了。

JavaScript console 是現代瀏覽器的一種內置功能，它允許開發者：

查看網頁上的錯誤和警告日志。

使用 JavaScript 命令與網頁進行交互。

調試應用程序并直接在瀏覽器中遍歷 DOM。

檢查和分析網絡活動。

基本上，你可以使用它來管理和監控 JavaScript 在瀏覽器中正確運行。

Console.log, Console.error, Console.warn 和 http://Console.info

log( ) / error( ) / warn( ) 和 info( ) 是最常用的方法，你可以將多個參數傳遞給這些方法（輸出會使用空格分隔開來）。

Console.group

這個方法允許你對一些列 console.logs （error 和 info 同理）分組在一個可以折疊的組中,

用法非常簡單，只需要將 console.log 放置 console.group 和 console.groupEnd 中即可。

輸出如下：

Console.table

使用 console.log 來顯示一個 JSON 或者一個非常大的 JSON 數組的時候不便于閱讀，這時候可以使用 console.table 來顯示效果會更好。

輸出結果：

Console.count, Console.time 和 Console.timeEnd

console.time 和 console.timeEnd 可以方便的查看代碼段耗費的時間。console.count 可以用于記錄代碼執行的次數：

輸出如下：

Console.trace 和 Console.assert

這個方法會在被調用的地方打印堆棧信息，例如：你正在創建一個 JS 庫，并且想告訴用戶錯誤產生的地方。

結果輸出如下：

生產環境中刪除所有 Consoles

我們往往在開發環境才需要使用 console，并希望在生產環境去除這部分內容。這時候可以使用 uglifyjs-webpack-plugin 刪除生產環境不想不留的 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

云服務器 GPU云服務器 console console.log console.log() 阿里云console

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95884.html

JavaScript函數式編程，真香之組合(一)

摘要：組合的概念是非常直觀的，并不是函數式編程獨有的，在我們生活中或者前端開發中處處可見。其實我們函數式編程里面的組合也是類似，函數組合就是一種將已被分解的簡單任務組織成復雜的整體過程。在函數式編程的世界中，有這樣一種很流行的編程風格。 JavaScript函數式編程，真香之認識函數式編程(一) 該系列文章不是針對前端新手，需要有一定的編程經驗，而且了解 JavaScript 里面作用域，閉...

mengbo 2019-08-23 15:22 評論0 收藏0
Emscripten教程之如何調試代碼（六）

摘要：值啟用了更詳細的堆棧保護檢查，它以犧牲一些性能的代價提供更精確的。這種可以由任何類型的編碼錯誤引起，但表現為函數指針錯誤，因為在運行時的預期表中無法找到函數。翻譯：云荒杯傾本文是Emscripten-WebAssembly專欄系列文章之一，更多文章請查看專欄。也可以去作者的博客閱讀文章。歡迎加入Wasm和emscripten技術交流群，群聊號碼：939206522。調試Emscri...

cod7ce 2019-08-22 11:12 評論0 收藏0
Source Map入門教程

摘要：多個文件合并，減少請求數。生成的多了，表示文件的位置。轉換前的所有變量名和屬性名。自從年雙十一正式上線，累計處理了億錯誤事件，得到了金山軟件等眾多知名用戶的認可。部署前端之前，開發者通常會對代碼進行打包壓縮，這樣可以減少代碼大小，從而有效提高訪問速度。然而，壓縮代碼的報錯信息是很難Debug的，因為它的行號和列號已經失真。這時就需要Source Map來還原真實的出錯位置了。 sho...

archieyang 2019-08-21 11:38 評論0 收藏0
前端干貨之JS最佳實踐

摘要：避免與進行比較避免推薦與進行比較的代碼，可以用以下技術進行替換如果值是一個應用類型，使用操作符，檢查其構造函數如果值是基本類型，使用檢查其類型如果是希望對象包含某個特定的方法名，則只用操作符確保指定名字的方法存在于對象上。持續更新地址 https://wdd.js.org/js-best-pr... 1. 風格一千個讀者有一千個哈姆雷特，每個人都有自己的code style。...

Aceyclee 2019-08-21 14:34 評論0 收藏0