owned this note
owned this note
Published
Linked with GitHub
# Degbugging HTML and CSS
---
## Questions Asked
How can we see and edit what elements and styles are rendered to the page?
How can we easily test how responsive our page is?
How can we debug CSS grid and flexbox layouts?
---
### How can we see and edit what elements and styles are rendered to the page?
----
Element panel is a feature in the chrome developer tools that allows you to inspect and modify a site from the front-end. It’s used to change the appearance and content of a web page by editing its CSS and HTML files.
----
#### Inspecting a Page :female-detective: :male-detective:
Inspecting a page allows the user access to elements and styles within. In turn it allows a user to debug, layout test, temporary edit and CSS live edit them within the inspector.
----
* Use Dev Tools within Firefox and Chrome to inspect a page.
For this example I'll be using Chrome. :star2:
----
There are many ways to select an element: :heavy_check_mark:
In your viewport, right-click the element and select Inspect.
In DevTools, click Select an element Select an
element or press Command+Shift+C (Mac) or Control+Shift+C (Windows, Linux), and then click the element in the viewport.
In DevTools, click the element in the DOM Tree.
In DevTools, run a query like`document.querySelector('p')` in the Console, right-click the result, and then select Reveal in Elements panel.
----
#### DOM Tree
Dev tools will show the DOM tree within elements panel.
----
----
#### Selecting an Element
To select an element click on a tag within the element tab in the inspector. Or use the tool within dev tool of a box and a cursor within, now you are able select any part of the website to have access to that element node within the DOM tree.
----
#### This is where the fun starts
You can now modify the site's CSS, add, delete and hide elements.
Remember, don’t be afraid to experiment with it as it only affects your browser and not the website itself.
---
### How can we easily test how *responsive* our page is?
----
#### Developer Tool (Dev Tool)
----
#### Demonstration
----
1. The Device Toolbar
Drag the handles to resize the viewport to whatever dimensions you need.
----
2. Show media queries
Click More options and then select Show media queries.
----
3. The Device list
Select the device from the Device list.
----
Rotate the viewport to landscape orientation
----
### But...
* There are some aspects of mobile devices that DevTools will never be able to simulate.
* The architecture of mobile CPUs is very different than the architecture of laptop or desktop CPUs.
* When in doubt, your best bet is to actually run your page on a mobile device.
---
### How can we debug CSS grid and flexbox layout?
----
#### GRID or not to GRID?
- Grid is two-dimensional. The two dimensions are rows and columns, and with grid layout you can control both at once.
- With flexbox, you choose whether to lay the items out as a row or a column, one or the other and not both.
- With CSS-GRID we can have items span rows too, in exactly the same way as we span columns. Something that has been very difficult to do before now.
- Do not replace CSS-GRID with FlexBox there are reasons for both: _[Flexbox vs. CSS Grid - Which is Better?](https://www.youtube.com/watch?v=hs3piaN4b5I)_
----
### Debugging CSS Grid with Firefox Dev Tools
----
#### Jen Simmons
CSS layout expert.
----
#### The Grid Inspector
In September 2016 Jen together with members of Firefox DevTools team created "GRID INSPECTOR".
----
#### Demonstration
----
The Grid Inspector is built in Firefox DevTools and it helps to inspect CSS-GRID related bugs.
The purpose of the tool was to popularize the CSS-GRID as well as to help developers to learn it.
----
When an HTML element on your page has display: grid applied to it, a number of features are made available in the DevTools to provide easy access to grid features.
----
#### In the HTML pane
In the HTML Pane, elements laid out using a grid have a "grid" marker beside them.In the HTML Pane, elements laid out using a grid have a "grid" marker beside them.
----
#### In the CSS pane
In the CSS pane's Rules view, any instance of a display: grid declaration gets a grid icon included within it: .
----
The core of the tool is a grid outline, overlaid on the page, which helps devs visualize how the grid is positioning their elements, and how the layout changes when they tweak their styles.
----
#### Grid layout options
**1. Overlay grid**
how you all the elements on the page with display: grid applied
**2. Grid display settings**
**3. Min grid view**
----
#### CHROME Tools for CSS-GRID
- **CSS-GRID highlighting**
- _**[Grid-Highlighter](https://github.com/ademilter/chrome-css-grid-highlighter)**_
- _**Gridman - CSS Grid inspector**_
----
#### Watch Jen Simmons video about mistakes related to CSS Grid!
**_[9 Biggest CSS-GRID mistakes](https://www.youtube.com/watch?v=0Gr1XSyxZy0)_**
---
### References
----
#### Debugging CSS
- _[MDN Debugging CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS_)_
- _[How to inspect element on Chrome](https://www.hostinger.co.uk/tutorials/website/how-to-inspect-and-change-style-using-google-chrome)_
- _[Get started with viewing and changingDOM](https://developers.google.com/web/tools/chrome-devtools/dom)_
----
#### Responsive Design Testing
- _[Google - Is your web page mobile friendly?](https://search.google.com/test/mobile-friendly)_
- _[Responsinator](https://www.responsinator.com/)_
- _[Resizer](https://material.io/resources/resizer/#)_
----
#### CSS-Grid related articles
- _[CSS Grid Inspector: Examine grid layouts](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts)_
- _[Debugging CSS Grid Layouts With Firefox Grid Inspector](https://www.smashingmagazine.com/2017/12/grid-inspector/)_
- _[CSS Grid Inspector in Firefox Nightly](https://hacks.mozilla.org/2017/06/new-css-grid-layout-panel-in-firefox-nightly/)_
- _[How to use Firefox Grid Inspector](https://www.joomlashack.com/blog/joomla-news/css-grid-additional-concepts/)_
- _[Experimental layout LAB by Jen Simmons](https://labs.jensimmons.com/)_
- _[FlexBox Inspector](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts)_
----
# Thank you very much!
**ANY QUESTIONS?**
Google Drive
Gist
Clipboard
Sign in with Wallet
