Built-in tools in all modern web browsers
Debugging Prototyping Analysing
Main menu – More Tools – Developer Tools
Copyright By PowCoder代写 加微信 powcoder
Mac: Command + Option + I Windows: Control + Shift + I
slooTveD nepO
Select an element in the page
Elements panel Search
Context menu – Inspect
tnemelE tceleS
Edit a node: double click on tag/attribute/content Tag
Attributes
Delete a node: select a node – press “Delete” Reorder nodes: select a node – drag
Hide a node: select a node – press “H”
States active
focus visited focus-within
etatS ecroF
A part of Elements panel which allows to manipulate with the styles of the selected element
Allows to:
See all the style rules applied to an element Add/delete properties
Change the value of the property
Add new style rules
bat selytS
Shows all the styles which are actually applied to the selected element
Shows the box model for the selected element
selyts detupmoC
DevTools will shows the hints when you start to type properties name/value Property hint Value hint
stniheulav/emaN
You can force the state of the selected element in the Style tab and see the style rules applied to this state
etats tnemelE
Chrome has more tools which helps to set the correct values of the properties
Color picker Box shadow
sloot elyts eroM
In the settings of DevTools you can find more tools, e.g. Changes which shows all the local changes you did
segnahc lacoL
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com