成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript Debug 之 Console

RaoMeng / 1975人閱讀

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

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

JavaScript console 是現(xiàn)代瀏覽器的一種內置功能,它允許開發(fā)者:

查看網(wǎng)頁上的錯誤和警告日志。

使用 JavaScript 命令與網(wǎng)頁進行交互。

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

檢查和分析網(wǎng)絡活動。

基本上,你可以使用它來管理和監(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 來顯示效果會更好。

輸出結果:

Console.count, Console.time 和 Console.timeEnd

console.time 和 console.timeEnd 可以方便的查看代碼段耗費的時間。console.count 可以用于記錄代碼執(zhí)行的次數(shù):

輸出如下:

Console.trace 和 Console.assert

這個方法會在被調用的地方打印堆棧信息,例如:你正在創(chuàng)建一個 JS 庫,并且想告訴用戶錯誤產(chǎn)生的地方。

結果輸出如下:

生產(chǎn)環(huán)境中刪除所有 Consoles

我們往往在開發(fā)環(huán)境才需要使用 console,并希望在生產(chǎn)環(huán)境去除這部分內容。這時候可以使用 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

文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉載請注明本文地址:http://systransis.cn/yun/95884.html

相關文章

  • JavaScript函數(shù)式編程,真香組合(一)

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

    mengbo 評論0 收藏0
  • Emscripten教程如何調試代碼(六)

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

    cod7ce 評論0 收藏0
  • Source Map入門教程

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

    archieyang 評論0 收藏0
  • 前端干貨JS最佳實踐

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

    Aceyclee 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<