瀏覽器與控制檯的使用

常見的瀏覽器內核

• webkit:chrome;opera >14 ;國產瀏覽器、手機瀏覽器
• trident:IE IE EDGE是trident+Chrome mini
• gecko:Firefox
• presto：opera <14

控制檯經常使用的工具

• Elements：查看頁面的結構
• Console：查看輸出結果和報錯信息
• Source：查看網頁的源碼
• Network：查看當前網頁的網絡請求信息（http報文、加載時間等）
• Application：查看網頁的數據和文件資源

經常使用的控制檯輸出命令

• console類
  • console.log：原來是什麼結構就輸出什麼
  • console.dir：輸出一個對象的詳細鍵值對信息
  • console.table：將一個多維的數組按照表格的方式在控制檯輸出

let persons={
		name:'rose',
		gender:'female'
	}
	console.log(persons)//{name: "rose", gender: "female"}
	console.dir(persons)//Object gender: "female" name: "rose"

let persons={
		names:['rose','jack','lucy']
	}
	console.table(persons)

<img src=https://img2018.cnblogs.com/blog/1779093/201911/1779093-20191127193221076-1984542148.png>

• alert/confirm確認取消：選擇型彈框/prompt：在confirm的基礎上加一個輸入框
  • 輸出的結果都先調用toString方法轉換爲字符串
  • 都會阻斷JS代碼的執行，只有當窗口關閉，JS纔會繼續運行

JavaScript代碼的位置

• 放到body中的底部：爲了保證頁面結構加載完成後再執行JS代碼操做頁面的元素（放到頭部有可能沒法得到須要操做的元素）
• 放到body的頭部+window.onload事件(該事件當頁面中的結構和內容都加載完成後纔出發)。注意與document.ready的區別(只要結構加載完成就觸發)