Tech Tips, Tricks & Trivia

If an image on a site is flashy, animated, and distracting, and you inspect it only to see this as its HTML source: src="data:image/webp;base64,UklGRiQAAABXRU..." There is no image file to block. That's a base64 image embedded directly in the page. You can still hide it in Firefox with no extensions, using a built-in feature called userContent.css . What really is a Base64 Image? Normally, an image is a file. Your browser downloads logo.png from a server. A base64 image is different. The image data is converted to a long text string and pasted directly into the HTML. Instead of this: <img src="/images/logo.png"> You get this: <img src="data:image/webp;base64,UklGRiQAAABXRUJQ..."> Sites do this to load a small icon a bit faster, or to hide tracking pixels, or to inline ads without a separate file request. The downside is you can’t block it like a normal file. It’s not a URL you can block in your hosts file. It’s baked into the page itself. B...

Firefox offers a way to download multiple images at once through the Tools menu option. Steps to follow in Firefox desktop browser in Windows: Use the Ctrl + I keyboard shortcut directly to bring up the Page Info dialog box or  use Alt+T to invoke the Tools menu and the select Page Info .  In the "Page Info" window, switch to the "Media" tab. Select the images you want to download by holding the Ctrl key while clicking or click on the Select All button. Hit the "Save As" button to download all images at once into a folder of your choice. Chrome and Edge lack a similar GUI option, but images can potentially be downloaded using JavaScript in the Developer Tools Console tab.

A compilation of my browser DevTools tips to aid in web application development: HOW TO turn off internet access for a single browser tab while testing a web application   HOW TO grab text from a HTML list or dropdown with JavaScript & Dev Tools   2 ways to copy tooltip text from a web page   HOW TO disable JavaScript in a browser after the page loads   HOW TO turn off copy-pasting restrictions on web form fields of annoying websites   HOW TO change the look of websites you don't own within your browser  

Firebug, the Firefox add-on offers the best view among commonly used browser developer tools to visualize the JSON feed provided by an API. reviewing JSON in Firebug However, all native browser Developer Tools show JSONP data as a blob of plain text that is hard to make sense of.  JSON with Padding or JSONP's purpose is to circumvent the same-source policy limitations of XMLHttpRequest . JSON Viewer is a free tool that can present JSONP data in a tree view thereby enabling easy analysis. There is a small additional step though before you can view. JSON Viewer - Text tab After you paste JSONP into the textarea in the Text tab, click on the Strip to {} option in the toolbar Now when you click on the Viewer tab, the JSONP will be better readable JSON Viewer - Viewer tab

In Firefox (version 33), use the shortcut Shift-F2 or open Tools > Web Developer > Developer Toolbar. At the command line that appears, type the command : screenshot filename .png --fullpage Unlike the full page screenshot option with the Responsive Design View that generates screenshots at different screen resolutions and with a predefined filename, the above Developer Toolbar Command line option lets you name the file as you like. The screenshot command accepts multiple  arguments to customize the screenshot images - screenshot [filename] [--clipboard] [--chrome] [--delay ...] [--fullpage] [--selector ...] Save a PNG image of the entire visible window (optionally after a delay) Options:     [filename] (string, helpManOptional)     The name of the file (should have a '.png' extension) to which we write the screenshot.     [--clipboard] (boolean, required)     True if you want to copy the screenshot instead of saving i...

In this age of the Cloud and automatic browser updates, everything is dynamic. You never know when & how a web page you bookmarked might change or where the browser feature you liked has disappeared. The following information was tested in Firefox 33, Chrome 38, Opera 16: Firefox: To disable JavaScript in a browser after the page loads, go to Tools > Web Developer > Inspector  In the panel that opens up, click on the  Settings  gear icon at the top right hand corner. Under Advanced Settings , check the option Disable JavaScript click on  image  to enlarge  Chrome: After a page has loaded in Chrome, hit F12 or use Ctrl+Shift+I keyboard shortcut to invoke Developer Tools . In the panel that opens up, click on the Settings gear icon at the top right hand corner. click on  image  to enlarge Check the option  Disable JavaScript [Update 25-Nov-17]:  There's now a command menu built into DevTools that makes it ...

With popular browsers like Firefox & Chrome updating themselves automatically, the odds are high that you wouldn't know the version number of the browser you're using. You'll need to track the versions however if you are a web developer or have to troubleshoot a browser bug or a defect within a website to its owners. Here is a handy list of links to know about current releases of browsers: Chrome Firefox Internet Explorer Opera Safari

Firefox allows you to block images originating from a specified domain. This trick can be used to block image ads  without bothering about installing a browser add-on. In Firefox, right click on the offending image ad on the page you are viewing in Firefox & from the context menu, you have to select View Image Info & click on the checkbox "Block images from {site name}". If you don't like Flash ads or Flash content that auto-starts within Chrome, type chrome://settings/content in your address bar and then press enter. In the scrollable "Content Settings" panel that opens, scroll down to "Plug-ins" and click on "Click to play". From then on, Flash content will wait for you to click them before they run. Similar settings exist for other browsers as well. Google Adsense now spews SVG & Data URI based image ads too to get past blockers: Firefox (v26) doesn't consider the above SVG ad as an image and the View Ima...

If want to check a YouTube video without waiting for it to buffer while you're on a low bandwidth Internet connection or just want to preview a video quickly on a decent connection, you can try out the mobile version of YouTube. However, the videos on m.youtube.com use the Real Time Streaming Protocol (RSTP) to show videos in 3gp format so it won't normally play on a desktop browser. You can copy this URL to play it in VLC Media Player. Alternatively you can use the  Vlc context menu Firefox add-on  to the add URLs of  mobile YouTube video files to VLCs playlist via the context menu of your Firefox browser. Open m.youtube.com in Firefox and search for the video  you want to watch. After you locate it, right click on the Watch Video link & choose Add URL to VLC Playlist option Is the Vlc context menu Firefox add-on safe to use? I don't know. It has been in the Mozilla Add-on directory since August, 2010 with 7 user reviews and 30K+ users so it'...

The Developer Tools (F12 keyboard shortcut) of popular browsers show the JSON output returned by an API, like this - Firefox add-on Firebug's JSON tab within the Net tab, presents it neatly like this - This makes it easy to extract the specific details that you are after.  The above view helps to visualize how to get to a flickr photo's id on making a call using the jQuery getJSON method to one of the flickr API services - data.photos.photo[i].id

This tip applies to Internet Explorer and Firefox. Picture this - While searching for something on the Web, you have opened a dozen tabs and for some reason you have to turn off your PC/laptop quickly. How do you save  all the addresses in tabs within a window for reviewing later? Madhivanan has a simple solution - Go to Tools > Internet options In the General tab, click the Use current button in the Home page  section. It will display all URLs in the textarea above it. Copy & paste it in some document for later use. The actual purpose of the Use current button is to set URLs so that the related pages open automatically when IE is opened. This tip can be extended to Firefox as well - Go to Tools > Options In the General tab look for the Use Current Pages button in the Startup section. When you click on the Use Current Pages button, all the URLs of the pages open in different tabs are copied to the Home Page text box with a pipe delimiter. C...

These days all popular browsers - IE, Firefox, Chrome, Opera, Safari, come with Developer Tools that help web developers debug HTML, JavaScript & CSS issues & build better web pages. It's probably the Netscape browser that first started helping developers with the Error Console option that would specify on which line a script error occurred & the possible cause. Firefox inherited that option while Firebug, the Firefox add-on, extended debugging facilities within Firefox to a different level. Firebug's feature-set is so comprehensive, it is possibly the inspiration for all the Developer Tools within popular browsers. Each browser's Dev Tools have some special features & they are continously evolving, thanks to the competition among themselves. The Developer Tools option can be invoked with the keyboard shortcut F12. Here is a compilation of links to the official documentation, tips & tricks for the Developer Tools - Internet Explorer: How to use F...

The JavaScript alert method is something that most web developers use to debug their code. However, now with all popular browsers incorporating Developer tools within them, there are easier ways to debug client-side code. Firebug is an optional add-on for Firefox that adds richer features to those natively available & probably the motivator for browsers to develop their own Developer tools. I guess, it was IE that started using F12 as keyboard shortcut to start up Developer tools and now that's synonymous with Developer tools on almost all browsers. Within the Developer tools, a Console panel exists for executing script statements on-the-fly. You can make use of Console methods to expose information that is flowing through your scripts. The console.log method can be used as an alternative to the obtrusive JavaScript alert method to track what's going on within your code without having to click OK for every dialog box that alert th...

Firefox 3.x used to have an option to block pesky images that were not part of the context of page that you were viewing - like image ads. You just had to right click on the image, & select "Block images from {domain serving the image}" to never see any images from that domain again. That context menu option is missing from Firefox 4  & above. It turns out that it is still there but there are some additional steps to reach it. Right click on the image on the page you are viewing in Firefox & from the context menu, you have to select View Image Info & click on the checkbox "Block images from {site name}". Thanks RalphB Also see: HOW TO block IFRAME based ads