¿ªÆª¸ÅÊö
ÔÚÉÏƪ²©¿ÍÖÐÏê½âGoogle Chromeä¯ÀÀÆ÷£¨ÀíÂÛƪ£©Ò»ÎÄÖУ¬Ö÷Òª½²½âÁËChrome ËÑË÷ÒýÇæʹÓá¢Chrome°²×°ºÍ»ù±¾²Ù×÷¡¢Chrome »ù±¾¼Ü¹¹¡¢¶àÏ̵߳ÈÔÀíÐÔÎÊÌ⣬Õâƪ½«Öص㽲½âChro-meʵ²ÙÎÊÌ⣬Ö÷Òª½áºÏ“Chrome Ö÷µ÷ÊÔÃæ°å“,¶ÔChrome,Elements,Con-sole,Sources,NetWork,TimeLine,Profiles,Application,Security,Audits½øÐÐÏê½â¡£Èô¶Ô¹ã´ó¶ÁÕßÅóÓÑÓÐËù°ïÖú£¬ÎÒ½«²»Ê¤¸Ð¼¤¡£±¾Æª²©ÎÄÖ÷Òª´Ó µ±È»ÁË£¬ÔÚÔĶÁ±¾ÆªÎÄÕÂÇ°£¬Ç¿ÁÒ½¨Òé´ó¼ÒÏÈÔĶÁÏê½âGoogle Chromeä¯ÀÀÆ÷£¨ÀíÂÛƪ£©Ò»ÎÄ¡£Èç´Ë£¬¶Ô±¾ÆªÎÄÕµÄÀí½â£¬Ò²Ðí»á¸ü¼ÓÈÝÒ×Щ¡£
ιʶøÖªÐÂ
1¡¢Chrome»ù±¾¼Ü¹¹Í¼ºÍChromeÖ÷µ÷ÊÔÃæ°å
2¡¢Chrome DevTools µ÷ÊÔÃæ°å¼òÒª½éÉÜ
ÕýÎÄ
Ò»¡¢ElementsÃæ°å
¸ÅÊö
¶¨Ò壺 Inspect and Edit Pages and Styles by Elements panel£¬but also effective immediately.
ÒëÎÄ£ºÍ¨¹ýElements Ãæ°å£¬²»½ö½ö¿ÉÒԲ鿴ºÍ±à¼Ò³ÃæºÍÑùʽ£¬¶øÇÒËù×öµÄ¸Ä±äÁ¢¼´ÉúЧ¡£
Ïê½â
µÚÒ»²¿·Ý£º²Ù×÷DOM
1¡¢²é¿´DOMÊ÷
´ò¿ªElementÃæ°å£¬¿ÉÒԲ鿴ËùÓÐDOM½Úµã£¬°üÀ¨CSSºÍJavaScript£¬ÈçÏÂͼËùʾ£¬×ó²àΪDOMÊ÷£¬ÓÒ²àΪCSSÑùʽ¡£
2¡¢Ñ¡È¡DOM½Úµã
½«Êó±êÒƵ½ÍøÒ³ÖеÄijԪËØÉÏÃ棬¸ÃÔªËػᷢÉú±ä»¯ÈçÏÂͼËùʾ£º
3¡¢µã»÷DOMÊ÷p½ÚµãÔªËØ£¬¼´¿ÉÑ¡ÖС£Õâʱ£¬»á·¢ÏÖElementÃæ°åÖеÄDOMÊ÷·¢ÉúÁ˱仯£¬ÈçÏÂͼËùʾ£º
×¢ÊÍ£º
Ñ¡ÖеÄp½ÚµãÔÚDOMÊ÷Öб»¾«È·¶¨Î»£¨À¶É«±³¾°£©£¬¿ÉÒÔ¿´µ½p½ÚµãµÄDOM²ã´Î£¨ºìÉ«·½¿ò£©£¬ÔÚÃæ°åÓҲ࣬ÊÇp½ÚµãµÄCSSÑùʽ¡£µ±È»£¬Ò²¿ÉÒÔÔÚElementÃæ°åµÄDOMÊ÷ÖÐÑ¡È¡DOM½Úµã¡£½«Êó±ê·Åµ½ÏàÓ¦µÄDOM½ÚµãÉÏ£¬»á·¢ÏÖÍøÒ³ÖÐÏàÓ¦µÄ½ÚµãÒ²·¢ÉúÁ˱仯,µã»÷¸Ã½Úµã£¬¼´¿ÉÑ¡ÖС£
4¡¢Ôö¼Ó¡¢É¾³ýºÍÐÞ¸ÄDOM½Úµã
ÔÚElementÃæ°åÖУ¬Ñ¡ÔñDOM½Úµã£¬ÔÚÎı¾´¦ÓÒ»÷Êó±ê£¬»áµ¯³öÒ»¸ö²Ëµ¥£¬ÈçÏÂͼËùʾ£º
×¢ÊÍ
a¡¢Edit text£º±à¼¸Ã½ÚµãÖеÄÎı¾¡£Ò²¿ÉÒÔÔÚÎı¾´¦Ë«»÷½øÐб༡£
b¡¢Edit as HTML£º±à¼¸Ã½Úµã¼°Æä×Ó½ÚµãµÄËùÓÐHTMLÔªËØ£¨°üÀ¨½ÚµãÖеÄÎı¾£©¡£
c¡¢Copy£º¸´ÖÆ ¡£(±È½Ï¼òµ¥£¬ÕâÀï¾Í²»ÂÛÊöÁË)
(1)Copy outerHTML
(2)Copy selector
(3)Copy XPath
(4)cut element
(5)Copy element
(6)Paste element
d¡¢Hide element:Òþ²ØÔªËØ£¬ÈÃÆä²»ÔÚÒ³ÃæÏÔʾ¡£
e¡¢Delete element:ɾ³ýÔªËØ¡£
f¡¢Expand all:Õ¹¿ªÖ¸¶¨½Úµã¼°ÆäËùÓÐ×ӽڵ㡣
g¡¢Collapse all:ÊÕËõÖ¸¶¨½Úµã¼°ÆäËùÓÐ×ӽڵ㡣
5¡¢Í϶¯½Úµã£¬¸Ä±ä½Úµã˳Ðò¡£
6¡¢Îª½ÚµãÌí¼ÓÊôÐÔ
Ϊ<p>½ÚµãÌí¼ÓidÊôÐÔ£¬ÈçÏ£º
<pid="demo"></p>
»áÔÚ¿ØÖÆ̨Êä³öp#demo£»ÔÙÏò<p>½ÚµãÌí¼ÓclassÊôÐÔºÍnameÊôÐÔ£¬ÈçÏ£º
<pid="demo"class="demo"data="demo"></p>
»áÔÚ¿ØÖÆ̨Êä³öp#demo.demo¡£¿É¼û£¬¿ØÖÆֻ̨»áÊä³ö·ûºÏW3C±ê×¼µÄÊôÐÔ£¬²»Ö§³Ö×Ô¶¨ÒåÊôÐÔ¡£²»¹ý£¬Êµ¼Ê¿ª·¢ÖкÜÉÙÓõ½¸Ã¹¦ÄÜ¡£
7¡¢Inspect and live-edit the HTML and CSS of a page using the Chrome DevTools Elements panel.
×¢ÊÍ
a¡¢Inspect and edit on the fly any element in the DOM tree in the Elements panel.b¡¢ View and change the CSS rules applied to any selected element in the Styles pane.
c¡¢View and edit a selected element's box model in the Computed pane.
d¡¢View any changes made to your page locally in the Sources panel.
8¡¢Live-edit a DOM node
To live-edit a DOM node, simply double-click a selected element and make changes:
×¢ÊÍ
The DOM tree view shows the current state of the tree; it may not match the HTML that was originally loaded for different reasons. For example, you can modify the DOM tree using JavaScript; the browser engine can try to correct invalid author markup and produce an unexpected DOM.
9¡¢Live-edit a style
Live-edit style property names and values in the Styles pane. All styles are editable, except the ones that are greyed out (as is the case with user agent stylesheets).
To edit a name or value, click on it, make your changes, and press Tab or Enter to save the change.
By default, your CSS modifications are not permanent, changes are lost when you reload the page. Set up persistent authoring if you want to persist your changes between page loads.
¡¡