é¦å
æ们æå¼å¼åè
å·¥å
·ï¼ä½ å¯ä»¥ç´æ¥å¨é¡µé¢ä¸ç¹å»å³é®ï¼ç¶åéæ©å®¡æ¥å
ç´ æè
å¨Chromeçå·¥å
·ä¸æ¾å°æè
ä½ ç´æ¥è®°ä½è¿ä¸ªå¿«æ·æ¹å¼ï¼ Ctrl+Shift+I (æè
Ctrl+Shift+Jç´æ¥æå¼æ§å¶å°)ï¼æè
ç´æ¥æF12ã
1ãElementsæ ç¾é¡µ
è¿ä¸ªå°±æ¯æ¥çãç¼è¾é¡µé¢ä¸çå
ç´ ï¼å
æ¬HTMLåCSSï¼
左侧就æ¯å¯¹é¡µé¢HTMLç»æçæ¥çä¸ç¼è¾ï¼ä½ å¯ä»¥ç´æ¥å¨æ个å
ç´ ä¸åå»ä¿®æ¹å
ç´ çå±æ§ï¼æè
ä½ ç¹å³é®é;Edit as Html;ç´æ¥å¯¹å
ç´ çHTMLè¿è¡ç¼è¾ï¼æè
å é¤æ个å
ç´ ï¼ææçä¿®æ¹é½ä¼å³æ¶å¨é¡µé¢ä¸å¾å°åç°ãï¼æ³¨ï¼çå°ä¸é¢å³é®èåçæåä¸ä¸ªé项;审æ¥å
ç´ äºä¹ï¼è¿æ¯ä¸æ¯è¯´æè¿ä¸ªå¼åè
å·¥å
·ç页é¢ä¹æ¯HTMLæ¥çå¢ï¼ä½ ç¹ä¸ä¸å°±ç¥éäºå¦ï¼å¿å¿ï¼
ä½ è¿å¯ä»¥å¯¹æ个å
ç´ è¿è¡çå¬ï¼å¨JS对å
ç´ çå±æ§æè
HTMLè¿è¡ä¿®æ¹çæ¶åï¼ç´æ¥è§¦åæç¹ï¼è·³è½¬å°å¯¹æ¹å
ç´ è¿è¡ä¿®æ¹çJS代ç å¤ï¼
Elementsæ ç¾é¡µçå³ä¾§å¯ä»¥å¯¹å
ç´ çCSSè¿è¡æ¥çä¸ç¼è¾ä¿®æ¹ï¼
ä½ è¿å¯ä»¥éè¿è¿éçå°åCSSéæ©å¨è®¾ç½®çCSSå¼çè¦çæ
åµã
ä¸é¢çMetricså¯ä»¥çå°å
ç´ å ç空é´æ
åµï¼å®½ãé«ãPaddingãMarginï¼
注æå°ä¸é¢çProperties没æï¼è¿ä¸ªå¾æç¨å¦ï¼å¯ä»¥è®©ä½ çå°å
ç´ å
·æçæ¹æ³ä¸å±æ§ï¼æ¯æ¥APIæåè¦æ¹ä¾¿å¾å¤å¦ï¼è¦æ³¨ææäºæ¹æ³åå±æ§å¨IEãFireFoxçå
¶ä»æµè§å¨ä¸é¢çæ¯ææ
åµå¦ï¼ã
2ãResourcesæ ç¾é¡µ
Resourcesæ ç¾é¡µå¯ä»¥æ¥çå°è¯·æ±çèµæºæ
åµï¼å
æ¬CSSãJSãå¾çççå
容ï¼åæ¶è¿å¯ä»¥æ¥çå°åå¨ç¸å
³çå¦CookiesãHTML5çDatabaseåLocalStoreçï¼ä½ å¯ä»¥å¯¹åå¨çå
容ç¼è¾åå é¤ã
è¿éçCSSæ件æä¸ä¸ªå¥½ç©çç¹æ§ï¼ä½ å¯ä»¥ç´æ¥ä¿®æ¹CSSæ件ï¼å¹¶ä¸ä¿®æ¹å³æ¶çæå¦ï¼
3ãNetworkæ ç¾é¡µ
Networkæ ç¾é¡µå¯¹äºåæç½ç«è¯·æ±çç½ç»æ
åµãæ¥çæä¸è¯·æ±ç请æ±å¤´åååºå¤´è¿æååºå
容å¾æç¨ï¼ç¹å«æ¯å¨æ¥çAjax类请æ±çæ¶åï¼é常æ帮å©ã注ææ¯å¨ä½ æå¼Chromeå¼åè
å·¥å
·ååèµ·ç请æ±ï¼æä¼å¨è¿éæ¾ç¤ºçå¦ã
ç¹å»å·¦ä¾§æä¸ä¸ªå
·ä½å»è¯·æ±URLï¼å¯ä»¥çå°è¯¥è¯·æ±ç详ç»HTTP请æ±æ
åµï¼
æ们å¯ä»¥å¨è¿éçå°HTTP请æ±å¤´ãHTTPååºå¤´ãHTTPè¿åçå
容çä¿¡æ¯ï¼å¯¹äºå¼åãè°è¯ï¼é½æ¯å¾æç¨çã
4ãScriptsæ ç¾é¡µ
å¾ææ¾ï¼è¿ä¸ªæ ç¾é¡µå°±æ¯æ¥çJSæ件ãè°è¯JS代ç çï¼ç´æ¥çä¸å¾ç说æï¼
è¿æä½ å¯ä»¥æå¼Javascriptæ§å¶å°ï¼åä¸äºå
¶ä»çæ¥çæè
ä¿®æ¹ï¼
ä½ çè³è¿å¯ä»¥ä¸ºæä¸XHR请æ±æè
æä¸äºä»¶è®¾ç½®æç¹ï¼
5ãTimelineæ ç¾é¡µ
注æè¿ä¸ªTimelineçæ ç¾é¡µä¸æ¯æç½ç»è¯·æ±çæ¶é´ååºæ
åµå¦ï¼è¿ä¸ªå¨Networkæ ç¾é¡µéæ¥çï¼ï¼è¿ä¸ªTimelineæçJSæ§è¡æ¶é´ã页é¢å
ç´ æ¸²ææ¶é´ï¼
ç¹å»åºé¨çRecordå°±å¯ä»¥å¼å§å½å¶é¡µé¢ä¸æ§è¡çå
容ã
6ãProfilesæ ç¾é¡µ
è¿ä¸ªä¸»è¦æ¯åæ§è½ä¼åçï¼å
æ¬æ¥çCPUæ§è¡æ¶é´ä¸å
åå ç¨ï¼
7ãAuditsæ ç¾é¡µ
è¿ä¸ªå¯¹äºä¼åå端页é¢ãå éç½é¡µå è½½é度å¾æç¨å¦ï¼ç¸å½ä¸Yslowï¼ï¼
ç¹å»runæé®ï¼å°±å¯ä»¥å¼å§åæ页é¢ï¼åæå®äºå°±å¯ä»¥çå°åæç»æäº
å®çè³å¯ä»¥åæåºé¡µé¢ä¸æ ·å¼è¡¨ä¸æåªäºCSSæ¯æ²¡æ被使ç¨çå¦ï¼
8ãConsoleæ ç¾é¡µ
å°±æ¯Javascriptæ§å¶å°äºï¼
è¿ä¸ªé¤äºæ¥çé误信æ¯ãæå°è°è¯ä¿¡æ¯ï¼console.log()ï¼ãåä¸äºæµè¯èæ¬ä»¥å¤ï¼è¿å¯ä»¥å½ä½Javascript APIæ¥çç¨ã
ä¾å¦ææ³æ¥çconsoleé½æåªäºæ¹æ³åå±æ§ï¼æå¯ä»¥ç´æ¥å¨Consoleä¸è¾å
¥;并æ§è¡ï¼
æä¹æ ·ï¼ä¸ç®äºç¶äºå§ ï¼åä¾å¦ææ³æ¥çæ¥æå½æ°é½æåªäºæ¹æ³ï¼
ï¼æ³¨ï¼æ³¨æå¨è¿éçå°çæäºæ¹æ³åå±æ§æ¯ES5æ°å¢çï¼è®°å¾å
¼å®¹å
¶ä»æµè§å¨çæ¯ææ
åµå¦ï¼
Google Chromeé¤äºç®æ´ãå¿«éï¼ç°å¨çChromeçæ件ä¹é常ç丰å¯äºãè对äºwebå¼åè
æ¥è¯´ï¼Chrome对äºHTML5ãCSS3çä¸äºæ°æ åçæ¯æä¹æ¯æ¯è¾å®åçï¼èä¸Chromeçå¼åè
å·¥å
·æ个人认为ççé常好ç¨
温馨提示:答案为网友推荐,仅供参考