Hello All,
My Talk/Demo was around Chrome Dev Tools, the features and useful extensions,
A few things I touched on regards DevTools were:
-
How to access Chrome Devs Tools
-
Changing the Doc side of the DevTools
-
How to view different device modes and device frames
-
Using inspect element
-
Over writing CSS on live websites
-
Forcing CSS states- :active :hover
-
Console tabs and looking for error
-
Network tab and what we can look for in the network tab
-
Application Panel - Clearing Site data
-
Network conditions - Throttling network
-
Sensors - Usage of Geolocation Over ride
Furthermore, I discussed and gave a quick demo on the following tools:
-
Grid Ruler
-
Check my links
-
What Font?
-
Notes Anywhere
-
Bug Magnet
-
Pixel Perfect
-
Page Load time
Accessing Dev Tools
To enter dev tools you can either;
1 – Press F12 on keyboard
2 – Ctrl + Shift + I
3 – Right click on web page and click inspect
- Changing the Doc side of the DevTools
To change the dock side, you can click the menu in the top right and select from any of the views
- How to view different device modes and device frames
To view the web page in different device modes, you can click the drop down where it says responsive and select a view
To view device frames, simply click the menu in your website page view and click ‘Show Device Frames’
- Using inspect element
To use inspect element, you will need to click the option on the top left of the dev tools,
Once selected you can then click any element on the webpage which will then bring back the HTML and styling rules for that element
- Over writing CSS on live websites
Over writing the CCS on live sites is not as complicated as you think, simply select the element you wish to change the styling on,
And you can over write/add/take out styling that you wish
Please note, once you refresh your browser all changes you’ve made will be revoked
- Forcing CSS states- :active :hover
If you have an element on your page which requires user interaction to view, an on-hover state for example, keeping your mouse on the webpage whilst trying to type notes on another can be a challenge, you can simply add a rule that forces the state,
All you need to do is select the element which has the on-hover/Active state, on the HTML part of the DevTools, right click, look for force state, hover over that then click your option,
This will them force the state on the element
- Application Panel - Clearing Site data
To clear site of all data, such as cookie and cache, you will need to navigate to the application tab in Dev tools,
Then you can select what data you want to clear and press clear Site data
- Network conditions - Throttling network
If you don’t already have the network conditions tab visible, you will need to enable it by clicking the dev tools menu, navigating to more tools and click Network conditions
Once you have the network conditions open, you then have the option to select a pre-set condition or the option to create your own, once you have selected an option, refresh your browser to see the webpage load with the conditions selected
A big thanks to all those who attended the demo and hopefully this will give you some good insight to DevTools and it gave you something to take away to look at,
Kieran