瀏覽器與控制台的使用

常見的瀏覽器內核

• 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)

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

JavaScript代碼的位置

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