Find the exact location of where a style is defined using Chrome Dev Tools

Find the exact location of where a style is defined using Chrome Dev Tools

This tip is definitely filled under "Stuff I wish I'd known sooner".

In Chrome, when trying to locate where a specific style is located you can simply hold down Ctrl and left click on the style property.

This will jump to the exact location of the property you were looking at in the file that it was declared in on the Sources tab.

No more clicking on the file name next to the style property and then searching for it manually!

Web Developer Monthly - Feb 2019

Web Developer Monthly February 2019

Feb 2019

Web
Developer
Monthly

 

 

Welcome to another Web Developer Monthly. This month's edition focuses a little more on some of the cool code samples and CodePens out there to help get your creative juices flowing.

If you've spotted anything you'd like me to share for the next Web Developer Monthly let me know in the comments below or reach out to me on Twitter. Enjoy!

How to quickly mark a message as important using MS Teams

How to quickly mark a message as important using MS Teams

MS Teams has quickly grown in usage within organizations over the last 12-18months. It's easy to see why - it's simple to use and ties into an organization's existing security policies very easily.

The only snag some people have with it is that when a lot of chatter is happening on a group channel important messages could be getting lost.

There are usually 2 ways to work around this.

How to view input placeholder styles in Chrome

How to view placeholder styles in Chrome

Have you ever tried to view the style of html placeholder in the browser? By default in Chrome this option won't be available to you but if you press F12 to open the Developer Tools and then click on the 3 dots in the top right corner of the tool window you should see the Settings option.

Click on this option and you will be presented with a screen that should look similar to what's shown above.

Check the "Show user agent shadow DOM" checkbox and reload your page. You should now see the placeholder html output in your dev tools when you view the elements tab. Clicking on the placeholder html will bring up the applied styles for you to view or edit.

Web Developer Monthly - Jan 2019

Web Developer Monthly January 2019

Jan 2019

Web
Developer
Monthly

 

 

Happy New Year and welcome to another Web Developer Monthly. To kick things off for 2019 this month's edition contains the definitive website performance checklist, links to download Visual Studio 2019, a tool to auto remove backgrounds from your images and more.

If you've spotted anything you'd like me to share for the next Web Developer Monthly let me know in the comments below or reach out to me on Twitter. Enjoy!

  • ← Older Posts

Get In Touch

Follow me online at TwitterFacebook or Flickr.

You can also contact me by email.

Buy Me A Coffee

Latest Tweets


Buy Me A Coffee