Pi Browser Bookmarklets

Was recently trying out NOOBS on the Raspberry Pi along with the new Epiphany browser.

Whilst tinkering, I realised the Epiphany browser has no developer tools or even a console to return errors generated. This makes web code editing a bit of a guessing game. Then I remembered some excellent bookmarklets I had stashed in my bookmarks, which could help.

Bookmarklets are saved and used as normal bookmarks. As such, they are simple “one-click” tools which add functionality to the browser – Wikipedia

Despite their simplicity they can handle some pretty comprehensive tasks. So here is a list of bookmarklets to help in some basic web coding and developing on the Pi.

Useful Bookmarklets

These are the basics covered. For a fuller list, Marco Biedermannof has put a list together over on GitHub of  more specific web bookmarklets covering perfomance, debugging, SEO etc.

Firebug Lite

NOTE – Firebug has since been depreciated and may no longer be supported.

One of the best known browser extensions for web developers is also available as a bookmarklet in this ‘lite’ guise. In some quick tests it works well and with much of the features as standard: Console, Inspector, Markup tabs. Head down to the stable channel and install by right clicking and selecting bookmark. It does not check locally hosted pages you might be working on, but there is a local version provided you can include in a page.

HTML_Codesniffer

This is a pretty comprehensive testing tool for accessibility issues. It displays a tiered warnings panel and can generate a report. It can cycle through errors and highlight the elements causing any issues.

NOTE – I could not right-click bookmark this site, I had to manually edit the bookmark and paste the JavaScript code.

H5O – HTML5 Outliner

This displays the document outline tree to give a visual representation of your HTML5 document structure. Handy to check if you have headings within appropriate sections.

Using Bookmarklets

I was using the Epiphany browser on NOOBs but bookmarklets should work well in all browsers but the save and use methods may differ. Essentially you need to be able to save and use browser bookmarks, not too taxing.

To save a bookmarklet
Right click the bookmarklet link > bookmark

To use a bookmark
Options (Gear Icon) dropdown > bookmarks

It should appear within the current page, sometimes there is the ability to close a tool from view, otherwise a page refresh will give you a clear view of the page again.

Hope this quick guide gives you some new methods of experimenting and developing on the web with the Raspberry Pi.

Raspberry Pi is a trademark of the Raspberry Pi Foundation

Advertisements