SWTC Manchester - Technical Testing

🗄️ Archive
3

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
image

- 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
image
To view device frames, simply click the menu in your website page view and click ‘Show Device Frames’

image

- Using inspect element

To use inspect element, you will need to click the option on the top left of the dev tools,
image

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,

image

And you can over write/add/take out styling that you wish

image

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,

image

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,

image
image.png378×674 13.3 KB

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

image

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

image

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

2 Likes