Chrome DevTools Console Tips

Back in January, I posted a bunch of productivity tips for when using Chrome DevTools. In this post I go through more tips on the DevTools console …

Logging

I find it really useful to log useful information about the state of the app at given points, out to the console. You can do this using console.log():

console.log

You can also include the state of objects:

console.log

You can also group logs together using console.groupCollapsed() and console.end():

console.group

You can highlight errors by using console.error():

console.error

You can also highlight warnings by using console.warn():

console.warn

Timing

When working on performance, I often need to time the execution of sections of code – the console API gives us a nice way to do this:

console.time

There is also a setting that allows you to show a timestamp on each log:

console.time

Filtering

When you start logging lots of stuff, the console can get busy. So, there’s a nifty filter bar that you can use to find the logs you are looking for:

console filter

Clearing

When the console gets busy and you are about to start a new debugging process, it’s nice to clear out all the logs. You can do this using console.clear() or using the clear button:

console.clear

Building a Pager Web Component – Part 6: Styling

In the last post, we added events to our pager component. In this post, we will style our pager component.

Encapsulated Styles

At the moment we have the following style declaration in our component.

The specificity is actually over the top here, because the styles within the shadow DOM of a component are encapsulated – i.e. they don’t leak out into the consuming page. So, let’s change our styling to:

Notice that we have coloured our pager links blue as well. You will see that the styles apply correctly.

If you add the following markup to the consuming page, you can see that the google link is not green which confirms our pager styling is encapsulated.

Let’s now add more styling to the pager:

If we look at our markup and script, we will see we make use of classes when we don’t really need to – we could just use CSS tag selectors.

So, let’s change our component to use tag selectors:

Themes

We are going to finish our component by introducing themes. :host(theme) allows us to specify styles for different themes. Let’s change our styling to the following:

The above specifies “light” and “dark” classes that are available in our pager component. So, if we change the pager tag in our consuming page to:

We should get something like the following:
pager component

So, that rounds off our component nicely. The full listing for our pager component is below and also available from x-pager source

Building a Pager Web Component – Part 5: Events

In the last post, we made our pager web component read attributes and respond to attribute changes. In this post we will make our pager component respond to clicking on links and publish a “pageChanged” event.

Exposing function to change pages

Firstly, we are going to create a public function, page() on the component that can be called in order to change pages. The implementation is as follows – it takes in a page number and calls _changePage() if a new page number has been requested.

After implementing the function, if you enter document.querySelector("x-pager").page(1); in the console, you will see the page in the pager change to 1.

Creating a page changed event

We are now going to create a pageChanged event in our pager that consumers of the component can subscribe to. We do this using highlighted lines of code.

So, if we add the following script to our consuming page, you will see that the event handler onChangedPage() is invoked when pager.page(2) is executed.

Handling page clicks

At the moment, clicking on the pager links still doesn’t do anything, so, let’s implement those click handlers. We do this using the highlighted lines of code in the full listing of the pager component below. _addEventListeners() adds _linkClick() as the handler for all the pager links. _linkClick() calls page() that changes the page, which we implemented earlier.

That’s it for this post. In the next post, we will look at styling our component.

Building a Pager Web Component – Part 4: Attributes

In the last post, we put our pager web component in a separate HTML file that can be referenced from any HTML page. In this post we will make our pager component read the attrbutes declared on the x-pager tag.

Reading attributes

Firstly, we need to create a couple of variables to hold the page number, pageNumber, and the total number of pages, pageCount. We then need to do some extra work in createdCallback() that reads the attributes declared on the x-pager tag which we do in a new function called _readAttributes().

Displaying the correct page

So far, we have read the attributes and stuffed them into variables. Our next step is to display the correct page number in the pager text. Let’s do that in a new function called _changePage(). Here’s our component script now:

When you now hit the page that references the pager component, you should see the following if you have page="1" and page-count="5" in the x-pager tag:
pager component

Handling attribute changes

The last thing we are going to do in this post is handle attribute changes. Let’s say we put the following script tag in the page that references the pager component:

At the moment nothing will happen because nothing is handling attribute changes in our component. To handle attribute changes we need to use attributeChangedCallback() which is a standard callback function in a web component that gets invoked when an attribute changes. So, let’s change our component script to the following:

You should now see that changing the page attribute on x-pager in the page’s script will trigger the change in the web component.

That’s enough for this post. In the next post we will look at events …

Building a Pager Web Component – Part 3: HTML Import

In the last post, we made use of a template and shadow DOM in our pager web component. In this post, we will make use of HTML import and put our pager web component in a separate file.

Moving the component bits to a separate file

Firstly, let’s create a new file called “pager.html” for our web component and move the template and script tag into there. The contents of pager.html should now be:

Referencing the component

In our page, we can now reference the pager component using a HTML import link tag . The HTML in our page should now be:

document.currentScript.ownerDocument

If we test our component now by navigating to our page, the component will not work. The problem is how we are referencing the template – document.querySelector("template") does not find it.

error

We need to get a reference to the web component document using document.currentScript.ownerDocument and select the template in this. Our changed pager component markup show now be:

In the next post we will look at reading the attributes “page” and “page-count”.