你不知道的console，讓js調試更簡單

antz 發布于2019-08-02 15:36 / 374人閱讀

摘要：對于前端的各位工程師，肯定不會對陌生，但是，你又能了解多少呢，今天就讓小鵬來一窺大前世界。則沒有任何反應分組在控制臺創建一個分組，直到調用之后分組結束今日事項吃飯睡覺打豆豆明日事項賞花賞月賞秋香喜歡就點贊收藏一下咯參考文獻

對于前端的各位工程師，肯定不會對console陌生，但是，你又能了解多少呢，今天就讓小鵬來一窺大前世界。

Chrome控制臺-開發者工具

windows按F12， MAC按Command + Option + C或Command + Option + J, 即可打開控制臺

1. 向 Web 控制臺輸出一條消息

console.log("Hello world!");
console.info("Hello world!");
console.warn("Hello world!");
console.error("Hello world!");
console.debug("Hello world!");

2. console.dir() 顯示一個對象對所有屬性和方法

console.dir(document);

3. console.table() 將數據以表格的形式顯示

這個方法需要一個必須參數data，data必須是一個數組或者一個對象

var names = [
    {
        name: "小明",
        age: 20,
        gender: "男"
    },
    {
        name: "小紅",
        age: 18,
        gender: "女"
    },
    {
        name: "小李",
        age: 22,
        gender: "男"
    }
]

console.table(names)

4. 計算操作占用的時常

注意：每一個定時器必須擁有唯一的名字

console.time("本次代碼運行時間");
let count = 0;
for (let i=0; i<100; i++) {
    count++;
}
console.timeEnd("本次代碼運行時間");

5. 輸出被調用的次數

console.count() 此函數接受一個可選參數 label

let user = "";
function greate () {
    console.count(user);
    return "hi" + user;
}

user = "Bob";
// 此時的lable是Bob
greate();

user = "John";
// 此時的lable是John
greate();
greate();
console.count("John");

6. 判斷斷言是否為真

console.assert() 如果斷言為false，則將一個錯誤消息寫入控制臺，如果斷言為true。則沒有任何反應

console.assert(1==1, "Success");
console.assert(1==2, "Error");

7. 分組

console.group()在控制臺創建一個分組，直到調用console.groupEnd()之后分組結束

console.group("今日事項");
    console.log("吃飯");
    console.log("睡覺");
    console.log("打豆豆");
console.groupEnd();

console.group("明日事項");
    console.log("賞花");
    console.log("賞月");
    console.log("賞秋香");
console.groupEnd();

喜歡就點贊收藏一下咯

參考文獻：

MDN: https://developer.mozilla.org...

云服務器 GPU云服務器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

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

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

你不知道的console，讓js調試更簡單

摘要：對于前端的各位工程師，肯定不會對陌生，但是，你又能了解多少呢，今天就讓小鵬來一窺大前世界。則沒有任何反應分組在控制臺創建一個分組，直到調用之后分組結束今日事項吃飯睡覺打豆豆明日事項賞花賞月賞秋香喜歡就點贊收藏一下咯參考文獻對于前端的各位工程師，肯定不會對console陌生，但是，你又能了解多少呢，今天就讓小鵬來一窺大前世界。 Chrome控制臺-開發者工具 windows按F12， ...

adie 2019-08-26 10:19 評論0 收藏0
你不知道的Chrome DevTools（4）：推薦幾款DevTools插件

摘要：下面推薦幾款插件，有些是博主親自試用過的，希望對大家的開發調試有幫助。這有點類似前面說過的插件。類似的針對不同框架的調試工具還有最后介紹的不是的插件，而是主題。總結好的，這次的插件就推薦了這幾個。 Web前端開發過程中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它作為Web前端開發性能調試的必備工具。就連隔壁的產品小哥都知道打開F12改一下頁面元素的...

svtter 2019-08-21 12:17 評論0 收藏0
[你不知道的 JavaScript 類型和語法] 第一章：類型

摘要：語言中規定的類型為以及。這兩個值有不同的類型。內建類型定義了七種內建類型中新增提示以上類型，除的被稱為基本類型。新增列出的六種類型的值都會返回一個對應類型名稱的字符串。是中新增的數據類型，我們會在第三章詳細介紹。譯者的前言一直都想好好研究這個在 GitHub 上很有名氣的系列，而翻譯恰是最好的閱讀途徑之一。可以讓我閱讀的時候，不那么不求甚解。圖靈社區出版了該系列兩部分的中文版——...

Astrian 2019-08-22 12:02 評論0 收藏0
你不知道的Chrome DevTools（2）：那些debug的技巧

摘要：我打算把一些上使用的高級技巧寫成你不知道的這一系列的博文，希望大家一起學習學習。然而，這還不是最嚴重的，因為的語法比較寬松和隨意，所以同一功能多種寫法，各種奇葩都有。總結前端在調試代碼的時候，知道開發工具上的小技巧，可以提高查找問題的效率。 Web前端開發過程中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它作為Web前端開發性能調試的必備工具。就連隔...

warnerwu 2019-08-19 14:38 評論0 收藏0
玩轉控制臺，看看那些你不知道的Console用法

摘要：清除控制臺在下清除控制臺的方法有很多輸入命令或命令使用快捷鍵或點擊控制臺左上角第二個圖標前言作為前端工程師，我們每天都離不開用控制臺調試代碼，console.log也成了我們最常用的命令，那除了用console.log，還有許多console的方法可以使用，熟練掌握它們，可以讓我們在控制臺看到的信息更美觀準確，也會大大提高我們的開發效率哦，下面就跟小肆一起來看看吧. Chrome的...

Big_fat_cat 2019-08-23 14:39 評論0 收藏0