你可能不知道的console

NSFish 發布于2019-08-22 15:02 / 1931人閱讀

摘要：肖奇馬斯克虞美人拉賈佩奇谷歌埃隆馬斯克特斯拉代表標識方法在控制臺中顯示指定對象的屬性，并展現類似文件樹樣式的交互列表。肖奇馬斯克拉賈佩奇埃隆馬斯克埃隆馬斯克拉賈佩奇埃隆馬斯克埃隆馬斯克拉賈佩奇方法清除控制臺信息。

1. 概述

console 對象提供對瀏覽器控制臺的接入。不同瀏覽器上它的工作方式是不一樣的. 其次它是一個全局對象, 我們先在控制臺將console打印出來, 看看它里面都有些什么東西

2. log()方法

console.log() 就是向web控制臺輸出一條信息. 參數可以是變量, 數字, 字符串等。

// 常規下
var name = "肖奇 馬斯克"
console.log("Hello");            // Hello
console.log(name);               // Jack
console.log(`Hello, ${name}`);   // 肖奇 馬斯克

除此之外, 還支持格式化輸出：

var name = "肖奇 馬斯克"
// %s         字符串
// %d or %i   整數
// %f         浮點數
// %c         樣式代碼
console.log("Hi, 我是%s。", name);
console.log("%cHi, 我是%s。", "color: rebeccapurple;", name);

3. info(), warn(), error()方法

// Info
console.info("Hi, This is message");
// warning 警告
console.warn("On, Your operation may cause a security breach!");
// Error 報錯
console.error("Shit! Variable does not exist!");

4. table()方法

接受一個數組或者對象, 可以接受一個額外的參數來描述表格的列數。它會把數據通過表格的形式打印出來

let array = [
  { name: "肖奇 馬斯克", tag: "虞美人" },
  { name: "拉賈 佩奇", tag: "谷歌" },
  { name: "埃隆 馬斯克", tag: "特斯拉" }
];
console.table(array)

5. group()方法

console.group和console.groupWEnd就像一對標簽一樣。group在控制臺創建一個新的分組, 輸出到控制臺上的內容都會被添加一個縮進, 表示該內容屬于當前分組, 直到調用console.groupEnd()之后, 當前分組才結束。

let items = [
  { name: "肖奇 馬斯克", tag: "虞美人" },
  { name: "拉賈 佩奇", tag: "谷歌" },
  { name: "埃隆 馬斯克", tag: "特斯拉" }
];
items.forEach(item => {
  console.group(`${item.name}`);
  console.log(`${item.name}`);
  console.log(`%c代表標識  ${item.tag}`, "color: red;");
  console.groupEnd(`${item.name}`);
})

6. dir()方法

在控制臺中顯示指定JavaScript對象的屬性，并展現類似文件樹樣式的交互列表。

console.dir(document.getElementById("header"));

7. count()方法

輸出每一次被調用的次數。

console.count("肖奇 馬斯克");
console.count("拉賈 佩奇");
console.count("埃隆 馬斯克");
console.count("埃隆 馬斯克");
console.count("拉賈 佩奇");
console.count("埃隆 馬斯克");
console.count("埃隆 馬斯克");
console.count("拉賈 佩奇");

8. clear()方法

清除控制臺信息。

console.clear();
// 執行結果：Console was cleared

9. time()方法

啟動一個計時器（timer）來跟蹤某一個操作的占用時長。每一個計時器必須擁有唯一的名字。 頁面中最多能同時運行10,000個計時器。跟group一樣, time也是配套的。 當以此計時器名字為參數調用 console.timeEnd() 時，瀏覽器將以毫秒為單位，輸出對應計時器所經過的時間。

console.time("fetching data");
fetch("https://api.github.com/users/anran758")
    .then(data => data.json())
    .then(data => {
        console.timeEnd("fetching data");
        console.log(data);
    });

10. assert()方法

第一個參數接受一個斷言(聲明), 第二個參數是一個message。 如果斷言為false，則將一個錯誤消息寫入控制臺；如果斷言是true，就當做沒發生。

// 語法：console.assert(assertion, message [, subst1, ..., substN]);
console.assert(1 === 1, "此條消息不會在控制臺輸出!");
console.assert(1 === 2, "1 === 2 這是個錯誤!");

GPU云服務器云服務器可能不知道地方你知道你應該知道你不知道的

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

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

[譯]14個你可能不知道的JavaScript調試技巧

摘要：在控制臺中使用，當到達傳入的函數時，代碼將停止。但除了私有和匿名函數這可能是找到調試函數的最快方法。在控制臺中輸入，當調用時，將以調試模式停止屏蔽不相關代碼現在，我們經常在應用中引入幾個庫或框架。譯者：SlaneYang原文：https://raygun.com/javascript-debugging-tips 以更快的速度和更高的效率來調試JavaScript 熟悉工具可以讓工具...

CODING 2019-08-21 17:27 評論0 收藏0
JavaScript 優雅的實現方式包含你可能不知道的知識點

摘要：優點簡單粗暴，直接調用缺點兼容性不太好，不過的話都支持你可能不知道的前端知識點對象和的方法。下面從深層次剖析一下對于開始的兩個賦值語句，，，相當于，而顯然等于。同理可以分析第三個賦值語句有些東西很好用，但是你未必知道；有些東西你可能用過，但是你未必知道原理。實現一個目的有多種途徑，俗話說，條條大路通羅馬。很多內容來自平時的一些收集以及過往博客文章底下的精彩評論，收集整理拓展一波，發...

617035918 2019-08-01 18:17 評論0 收藏0
JavaScript 優雅的實現方式包含你可能不知道的知識點

摘要：優點簡單粗暴，直接調用缺點兼容性不太好，不過的話都支持你可能不知道的前端知識點對象和的方法。下面從深層次剖析一下對于開始的兩個賦值語句，，，相當于，而顯然等于。同理可以分析第三個賦值語句有些東西很好用，但是你未必知道；有些東西你可能用過，但是你未必知道原理。實現一個目的有多種途徑，俗話說，條條大路通羅馬。很多內容來自平時的一些收集以及過往博客文章底下的精彩評論，收集整理拓展一波，發...

Zhuxy 2019-08-29 14:06 評論0 收藏0
JavaScript 優雅的實現方式包含你可能不知道的知識點

摘要：優點簡單粗暴，直接調用缺點兼容性不太好，不過的話都支持你可能不知道的前端知識點對象和的方法。下面從深層次剖析一下對于開始的兩個賦值語句，，，相當于，而顯然等于。同理可以分析第三個賦值語句有些東西很好用，但是你未必知道；有些東西你可能用過，但是你未必知道原理。實現一個目的有多種途徑，俗話說，條條大路通羅馬。很多內容來自平時的一些收集以及過往博客文章底下的精彩評論，收集整理拓展一波，發...

KaltZK 2019-08-21 18:21 評論0 收藏0