国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Chrome DevTools Tips

scola666 / 2608人閱讀

摘要：可以用來表示當(dāng)前在中的欄中查看頁面信息中選中的節(jié)點(diǎn)表示當(dāng)前選中的節(jié)點(diǎn)信息表示當(dāng)前選中的節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)信息表示當(dāng)前選中的節(jié)點(diǎn)的上一個(gè)節(jié)點(diǎn)信息和在控制臺中是方法的別名未定義的情況下，則是的方法并將結(jié)果以數(shù)組的形式返回類型的作用簡單表示可以用在

$0

$0可以用來表示當(dāng)前在Chrome DevTools中的Elements欄中查看頁面信息中選中的html節(jié)點(diǎn)

$0 表示當(dāng)前選中的節(jié)點(diǎn)信息

$1 表示當(dāng)前選中的節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)信息

$2 表示當(dāng)前選中的節(jié)點(diǎn)的上一個(gè)節(jié)點(diǎn)信息

$和$$

$在console控制臺中是document.querySelector方法的別名【未定義$的情況下】，$$則是document.querySelectorAll的方法并將結(jié)果以數(shù)組的形式返回NodeList類型
$$的作用簡單表示

Array.from(document.querySelectorAll("div")) === $$("div")
$_

$_ 可以用在控制臺中作為上一個(gè)值的引用直接使用，節(jié)省時(shí)間

使用

Math.random(); // 0.2505550952725395
$_ // 0.2505550952725395
$i

搭配插件Console Importer使用，注意：有些頁面受CSP安全策略影響無法使用
當(dāng)需要引入某個(gè)庫時(shí)，可以使用$i(npm package name); 比如：$i("lodash");提示成功后，就可以在控制臺中使用lodash庫提供的方法了

copy(...)

DevTools中提供的copy方法可以用來將控制臺Console中任何存在的東西復(fù)制到粘貼板上

使用

msg = "asdf".repeat(3); // asdfasdfasdf
copy($_) // asdfasdfasdf
console.assert

使用console.assert斷言打印自定義信息提示，如果console.assert第一個(gè)參數(shù)是falsy值則會打印自定義信息

使用

value = null;
console.assert(value,"Value is empty"); // VM5452:2 Assertion failed: Value is empty
console.table

用于將數(shù)據(jù)按照表格的形式輸出，視覺上更加直觀

使用

console.table(data);
console.dir

可以使用console.dir將DOM節(jié)點(diǎn)的詳細(xì)信息和默認(rèn)屬性打印出來

使用

console.dir(NodeType);

Consle is Async

在Console中,要使用async await不用手動包裹一層async,可直接使用await,因?yàn)樗J(rèn)已經(jīng)加了Async

resp = await fetch("url");
json = await fetch("url");
monitor functions

可以用來追蹤查看某個(gè)屬性或方法被調(diào)用

使用

class Person {
  constructor(name, role) {
    this.name = name;
    this.role = role;
  }
  
  greet() {
    return this.getMessage("greeting");
  }
  getMessage(type) {
    if (type === "greeting") {
      return `Hello, I"m ${this.name}!`;
    }
  }
}
j = new Person("Json");
m = new Person("Mary");
monitor(j.getMessage); 
j.greet(); //function getMessage called with arguments: greeting
// "Hello, I"m Json!"
monitorEvent

給某個(gè)節(jié)點(diǎn)添加監(jiān)聽事件

使用

monitorEvent(nodeReference, eventName);
console.log添加css

可以自定義輸出內(nèi)容的樣式

使用

console.log("%cHello Console

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/109429.html

相關(guān)文章

  • 五種前端開發(fā)必備的調(diào)試技術(shù)

    摘要：在前端開發(fā)中，調(diào)試技術(shù)是必不可少的技能，本文將介紹五種前端開發(fā)必備的調(diào)試技術(shù)。移動調(diào)試斷點(diǎn)斷點(diǎn)方法遠(yuǎn)程映射本地調(diào)試在移動上面開發(fā)調(diào)試是很復(fù)雜的，所以就有了。 在前端開發(fā)中，調(diào)試技術(shù)是必不可少的技能，本文將介紹五種前端開發(fā)必備的調(diào)試技術(shù)。 Weinre移動調(diào)試 DOM 斷點(diǎn) debugger斷點(diǎn) native方法hook 遠(yuǎn)程映射本地調(diào)試 Weinre 在移動上面開...

    張紅新 評論0 收藏0

  • 使用Chrome DevTools的Timeline分析頁面性能

    摘要：如果網(wǎng)頁動畫能夠做到每秒幀，就會跟顯示器同步刷新，達(dá)到最佳的視覺效果。下面的一條是，低于這條線，可以達(dá)到每秒幀上面的一條是，低于這條線，可以達(dá)到每秒次渲染。圖中幀柱的高度表示了該幀的總耗時(shí)，幀柱中的顏色分別對應(yīng)該幀中包含的不停類型的事件。 原文地址：http://horve.github.io/2015/10/26/timeli... 隨著webpage可以承載的表現(xiàn)形式更加多樣化，通...

    v1 評論0 收藏0

  • 正在暑假中的《課多周刊》(第1期)

    摘要：正在暑假中的課多周刊第期我們的微信公眾號，更多精彩內(nèi)容皆在微信公眾號，歡迎關(guān)注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大的動力。原理微信熱更新方案漲知識了，熱更新是以后的標(biāo)配。 正在暑假中的《課多周刊》(第1期) 我們的微信公眾號：fed-talk，更多精彩內(nèi)容皆在微信公眾號，歡迎關(guān)注。 若有幫助，請把 課多周刊 推薦給你的朋友，你的支持是我們最大的動力。 遠(yuǎn)上寒山石徑...

    liukai90 評論0 收藏0

  • 正在暑假中的《課多周刊》(第1期)

    摘要：正在暑假中的課多周刊第期我們的微信公眾號，更多精彩內(nèi)容皆在微信公眾號，歡迎關(guān)注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大的動力。原理微信熱更新方案漲知識了，熱更新是以后的標(biāo)配。 正在暑假中的《課多周刊》(第1期) 我們的微信公眾號：fed-talk，更多精彩內(nèi)容皆在微信公眾號，歡迎關(guān)注。 若有幫助，請把 課多周刊 推薦給你的朋友，你的支持是我們最大的動力。 遠(yuǎn)上寒山石徑...

    yintaolaowanzi 評論0 收藏0

  • FCC 成都社區(qū)·前端周刊 第 6 期

    摘要：詳情發(fā)布新版本中可以自動修復(fù)和合并沖突的文件，還新增了命令。詳情是一個(gè)用構(gòu)建設(shè)計(jì)系統(tǒng)的開源工具，提供了一套基礎(chǔ)應(yīng)用程序開發(fā)的工具，模式和實(shí)踐。目前，只有和的最新版本支持該屬性。詳情每周一同步更新到歡迎 01. JS 引擎 V8 v6.6 的更新 最新 v6.6 版本的 V8 JavaScript 引擎更新了方法 Function.prototype.toString()，改進(jìn)了代碼緩存...

    Airy 評論0 收藏0

發(fā)表評論

0條評論

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