最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

第九堂 – Dev Tools Domination

XAMPP下载 admin 757浏览 0评论
 今天又是一個沒有介面的實作,要來練習的是網頁開發很常用到的console小工具,相信學會這些能夠讓各位的測試能力又更進一步。

邏輯流程
學習在Chrome使用element的debugger
練習基本log技巧,學習不同型態的log
課程重點
瀏覽器的debugger:在Elements頁籤中選擇欲設為中斷點之元素,點選右鍵→Break on→attribute modifications,如下圖。
QQ截图20181104163642
這時候當你執行改變P元素屬性的函式時,就會在中斷點暫停,接著可以一行一行執行,觀察屬性變化。
基本的log:console.log(“Hello”)
加入變數的log:有兩種方法
console.log(“Hello, I’m %s”,”Hank”)

let name = “Hank”
console.log(`Hello, I’m ${name}`)
加入style的log:console.log(“%c Hello”,”color:red”)
顯示警告的log:console.warn(“oops”)
顯示錯誤的log:console.error(“oh no”)
info log:console.info

(“This is info”),但不知為何我的Chrome沒有顯示log前面的i符號,但Edge瀏覽器有顯示。
判斷條件的log:console.assert(1==2,”that’s false”),後面的字串是當條件為false才會出現
清除log:console.clear()
顯示element的log:console.dir(document.querySelector(‘p’)),可以詳細顯示元素的內容,如可用函式、子元素等
將log群組化:利用教材給的dogs Array
dogs.forEach(dog => {
console.group(`${dog.name

}`)
console.log(`This is ${dog.name

}`)
console.log(`${dog.name

} is ${dog.age} years old`)
console.log(`${dog.name

} is ${dog.age*7} years old`)
console.groupEnd(`${dog.name

}`)
})
利用group()和groupEnd()可將中間的console.log()群組。若group()換成groupCollapsed(),則預設群組摺疊顯示。
計時的log:設定起始跟結束點,可得到中間所花的時間。
console.time(“aaa”)
fetch(“https://api.github.com/users/wesbos

“)
.then(data => console.timeEnd(“aaa”))

转载请注明:XAMPP中文组官网 » 第九堂 – Dev Tools Domination

您必须 登录 才能发表评论!