1. 程式人生 > >Chrome控制檯console的各種用法(方便除錯)

Chrome控制檯console的各種用法(方便除錯)

1、輸出資訊

  console.log('訊息內容!'); //輸出普通訊息
  console.info('訊息內容!'); //輸出提示資訊
  console.error('訊息內容!');//輸出錯誤資訊
  console.warn('訊息內容!'); //輸出警告資訊

2、資料表格化

  var thisObj = [
    { name: 'quber', email: '[email protected]', qq: 757200834 },
    { name: 'xm', email: '[email protected]', qq: 757200833 },
    { name: 'jack', email: '

[email protected]', qq: 757200832 },
    { name: 'maer', email: '[email protected]', qq: 757200831 }
  ];
  console.table(thisObj);

3、統計程式碼執行時間

  console.time('統計時間');

  var count = 0;
  for (var i = 0; i < 999999999; i++) {
    count++;
  }

  console.timeEnd('統計時間');

4、分組輸出資訊

  console.group('分組1');
  console.log('分組1-1111');
  console.log('分組1-2222');
  console.log('分組1-3333');
  console.groupEnd();

  console.group('分組2');
  console.log('分組2-1111');
  console.log('分組2-2222');
  console.log('分組2-3333');
  console.groupEnd();

5、統計程式碼執行的次數

  function testFn() {
    console.count('當前執行的次數');
  }
  testFn();
  testFn();
  testFn();

6、當表示式為false時,輸出資訊

  var testObj = false;
  console.assert(testObj, '當testObj為false時才輸出!');

7、將物件以樹狀結構展現

  var thisObj = {
    name: 'quber',
    age: 26,
    fn: function() {
      alert('quber');
    }
  };
  console.dir(thisObj);

8、展現網頁某個節點所包含的所有html/xml程式碼

  console.dirxml($('.kx-frm-gd'));

9、佔位符

  console.log("%d年%d月%d日", 2016, 8, 22);//console支援的佔位符有:字元(%s)、整數(%d或%i)、浮點數(%f)和物件(%o)

相關推薦

Chrome控制檯console各種用法方便除錯

1、輸出資訊   console.log('訊息內容!'); //輸出普通訊息   console.info('訊息內容!'); //輸出提示資訊   console.error('訊息內容!');//輸出錯誤資訊   console.warn('訊息內容!'); //

Chrome 控制檯console用法學了之後對於除錯js可是大大有用的哦

大家都有用過各種型別的瀏覽器,每種瀏覽器都有自己的特色,本人拙見,在我用過的瀏覽器當中,我是最喜歡Chrome的,因為它對於除錯指令碼及前端設計除錯都有它比其它瀏覽器有過之而無不及的地方。可能大家對console.log會有一定的瞭解,心裡難免會想除錯的時候用alert不

Chrome 控制檯console用法(js除錯)

大家都有用過各種型別的瀏覽器,每種瀏覽器都有自己的特色,本人拙見,在我用過的瀏覽器當中,我是最喜歡Chrome的,因為它對於除錯指令碼及前端設計除錯都有它比其它瀏覽器有過之而無不及的地方。可能大家對console.log會有一定的瞭解,心裡難免會想除錯的時候用alert不就行了,幹嘛還要用console.

Chrome 控制檯console用法

大家都有用過各種型別的瀏覽器,每種瀏覽器都有自己的特色,本人拙見,在我用過的瀏覽器當中,我是最喜歡Chrome的,因為它對於除錯指令碼及前端設計除錯都有它比其它瀏覽器有過之而無不及的地方。可能大家對console.log會有一定的瞭解,心裡難免會想除錯的時候用alert不就行了,幹嘛還要用console.

chrome控制檯用法除錯js有很大的作用

大家都有用過各種型別的瀏覽器,每種瀏覽器都有自己的特色,本人拙見,在我用過的瀏覽器當中,我是最喜歡Chrome的,因為它對於除錯指令碼及前端設計除錯都有它比其它瀏覽器有過之而無不及的地方。可能大家對console.log會有一定的瞭解,心裡難免會想除錯的時候用alert不就行了,幹嘛還要用console.l

PopupWindow的各種用法——使用PopupWindow做一個指引蒙板帶啟動頁,仿ViewPager滾動的引導頁

引言:接下來和大家分享一下用一個PopupWindow來做一個指引蒙板的效果。鑑於網上對於“指引蒙板”的實現例子不是太多(或者是我找不到更多的),而且好像有很多的例子都是用一個Frame佈局+Fragment去完成,對於這種做法自己不太喜歡,於是突發奇想的想要自己用Popu

chrome瀏覽器console拓展用法

chrome 瀏覽器console列印 使用CSS美化輸出資訊 console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large"); 比較類似

Chrome developer tool介紹javascript除錯

Chrome瀏覽器得益於其優秀的V8直譯器,javascript執行速度和記憶體佔有率表現非常優秀。對於html+css+javascript前臺技術的學習或者開發,瀏覽器developer tool的使用時必不可少的

vector最最最基礎用法非原創

sort排序 兩個 src per pre 開始 程序 -1 logs 在c++中,vector是一個十分有用的容器,下面對這個容器做一下總結。 1 基本操作 (1)頭文件#include<vector>. (2)創建vector對象,vector<int

【模板】LCA最近公共祖先各種寫法施工中

def getchar() div 輸入輸出格式 memset while 樹結構 算法 its 以洛谷模板題(P3379)為例。 題目描述 如題,給定一棵有根多叉樹,請求出指定兩個點直接最近的公共祖先。 輸入輸出格式 輸入格式: 第一行包含三個正整數N、M、S,分別表

sscanf的最基礎用法非原創

urn clas 參數 detail tail include sca min col 1 #include<stdio.h> 2 #include<stdlib.h> 3 #include<string.h> 4 5 in

AWK的用法持續更新

awk方法比較笨,算是做一個總結,習慣用AWK進行取值,下面以free -m為例來舉例!!!持續更新,看到的網友也可以留言的形式來一起更新內容,謝謝例子:[root@130 ~]# free -m total used free shared b

記一些stl的用法持續更新

spa style str https tps sdf sub name span   有些stl不常用真的會忘qwq,不如在這裏記下來,以後常來看看  C++中substr函數的用法 1 #include<string> 2 #include&

mapreduce的cleanUp和setUp的特殊用法TopN問題和常規用法

ado clean 進入 htm 這一 很多 set mapred net 一:特殊用法 我們上來不講普通用法,普通用法放到最後。我們來談一談特殊用法,了解這一用法,讓你的mapreduce編程能力提高一個檔次,毫不誇張!!!扯淡了,讓我們進入正題:

smali 除錯方法動態除錯

smali檔案 1.下圖為基本的smali結構 一個smali檔案對應一個class 2.欄位描述符‘ Java中Void在smali中對應V Void -> V 其他具體描述符參考下面表格: 下面貼上兩段例子程式碼對應看下: Androi

支付寶APP支付整合+.net沙箱除錯

1.服務端整合程式碼 private const string APPID = "發起請求的應用ID"; private const string APP_PRIVATE_KEY = "私鑰"; private const string ALIPAY

Java DecimalFormat 用法數字格式化

我們經常要將數字進行格式化,比如取2位小數,這是最常見的。Java 提供 DecimalFormat 類,幫你用最快的速度將數字格式化為你需要的樣子。下面是常用的例子: import java.text.DecimalFormat; public class Test{ pu

object.defineproperty用法get,set

起始 Get:指讀取屬性時呼叫的函式。 Set:指寫入屬性時呼叫的函式。 困惑 因為一開始不是很懂這個方法,所以一直糾結於get方法:我設定了新的值,我怎麼獲取這個新的值? let data1 = { name:'小明', age:18 } Object

Matlab中Max和find用法摘要筆記

find:找到非零元素的索引和值   語法: 1.  ind = find(X) 2.  ind = find(X, k) 3.  ind = find(X, k, 'first') 4. &nb

MapReduce的本地執行模式debug除錯

(1)mapreduce程式是被提交給LocalJobRunner在本地以單程序的形式執行。在本地執行mapreduce程式可以更快地執行,並且可以使用debug進行跟蹤程式碼,方便查錯,在本地執行主要是看mapreduce的業務邏輯是不是正確,如果在本地執行錯誤的話,那麼在叢集上肯定也是錯