Today, Sitepoint released an article they commissioned me to write a few weeks ago that a lot of work went into and I’m happy with the result. In Beyond console.log – level up your debugging skills I describe a few features of Chromium browser developer tools and how they interact with Visual Studio Code.

I cover the following topics/features:

• Getting more information in your console.log() statements by wrapping values with curly braces
• Formatting/converting log values with specifiers, for example console.log(‘%ix %s developer’, 10, ‘console’) resulting in “10x console developer”
• Grouping logging statements
• Using console.info(), console.warn() and console.error() to allow for filtering
• Timing things with console.time() and counting with console.count()
• Using live expressions to avoid slowing down your debugging with tons of log messages
• Using Console utilities
  and built-in convenience methods like $() or monitor()
• Using console.table() to display information, f.e. can you guess what console.table($$(‘img:not([src^=data])’), [‘src’,’alt’]) does?
• Moving from Console to Sources
• Using the Command Menu to access functionality faster
• Storing your DOM manipulation scripts in Sources fo easier re-use
• Enhancing third party websites with Overrides
• Syncing changes you do in Developer tools live with your editor using Workspaces
• Using the browser developer tools in Visual Studio code using the Edge Devtools for VS Code extension
• Moving on to breakpoint debugging

Go read the full article on Sitepoint

With the 1.1.4 release of the Microsoft Edge Devtools for Visual Studio Code extension we have added the final bit that people kept asking for: Console messages now show up in the output console of Visual Studio Code.

To celebrate and as it has been long coming, I recorded a quick, roughly four minute video walkthrough showing how:

• You can start a server inside Visual Studio Code in the correct folder without using an external terminal
• You start using the extension by creating a new instance of Edge running inside the editor
• How to debug network issues in the editor
• How to tweak the DOM and CSS in the editor
• How the extension allows you to activate the link to a style sheet in the CSS editor to jump to the correct line in the file inside the VS Code editor

The extension is available from the market place and inside of Visual Studio Code. It is open source and you can file issues on GitHub and see what’s coming next.

Lately I’ve been looking into improving the ways I use browser developer tools by using features I’ve never looked and/or forgotten. One amazing feature of those are Workspaces which have been around for a long time but don’t get as much use as I think they should.

In essence, this feature allows you to use the visual tools in the developer tools to tweak and change styles in a more persistent manner. Instead of having to copy and paste the changes you made back into your CSS files in your editor, using Workspaces allows Browser Developer Tools to directly change files on the hard drive. That way you sync changes with your editor.

You can see this in action in this video on YouTube.

In the video, I cover the following steps:

• Dragging a project folder into Visual Studio Code to have all files to edit
• Opening the integrated terminal in VS Code to start a local server using “php -s localhost:8000”.
• Changing the project styles using the Colour picker and the Font editor
• Copy whole changed CSS files using the Sources panel
• Using the Command Menu to access functionality of the tools
• Using the Changes panel to track individual changes in your CSS files caused by using the developer tools
• Dragging the project folder into the Sources panel of developer tools
• Allowing the developer tools to access the hard drive to sync changes
• Using the developer tools to change CSS files directly in sync with Visual Studio Code.

Lately I thought it would be good to convert a lot of the GIFs I have to MP4 to save space on some of memory sticks. The problem that I found with that is that Quicklook on Mac doesn’t loop MP4s when you view them, which is annoying.

So I scratched my own itch and wrote a quick, plain vanilla JavaScript slide show and you can see it in action on GitHub.

Features include:

• Displays any video or image in a folder in the largest possible size without cropping
• Mouse or keyboard navigation (Arrow Left and right for back and forward, Space to toggle automatic advancing)
• Slide show option showing a new image every x seconds.
• Slide show waits for images to load and videos to be playable before advancing
• Stores the current position of the slide show. Next time you load the document it commences where it stopped last time.
• You can have endless slide shows or those that stop at the last and the first item

Usage and customisation

You can use the slideshow by giving it a container to create all the elements in, define the different settings of the slideshow object:

• container: a DOM reference to the HTML element the slide show should be added in
• media: an Array of images and videos to display
• folder: the folder containing these – this should be a child folder of one the slide show is in.
• autoplay: yes or no indicating if the slide show should start or not
• speed: time in milliseconds to advance to the next media item (f.e. 1000 for a second)

The code to use in your HTML is:

<div id="slideshow-container"></div>
<script>
  let slideshow = {
    container: '#slideshow-container',
    media: [
    'ball.mp4','dinowalk.mp4','dirty.mp4',
    'goldiejump.mp4','step.mp4','tippy.mp4','wag.mp4'
    ],
    folder: 'imgs/',
    autoplay: 'yes',
    endless: 'yes'
  }
</script>
<script src="slideshow.js"></script>

Automating the media collection

Currently I am using this on my hard drive running a local server and the index.php script. If you are using a Mac, PHP comes with the system. Go to the terminal, navigate to the folder where the slide show is and run:

$ php -S localhost:8000

Then you can navigate in you browser to localhost:8000 and the rest happens automatically.

The index.php script lists all the current folders in the directory the script is in and gives you list of all of them. Clicking the link of the name starts the slide show with the current folder. Feel free to check the script, but there isn’t much magic there.

The index.php is part of the GitHub repo, so cloning or downloading the zip will get you started.

When you use Markdown to write your documentation most static page generators will generate IDs for each of the headings in the document to allow you to navigate directly to them. (more…)