Tips to effectively use Google chrome developer tool

Chrome Dev tools

Web based applications are dominating the software industry and various frameworks like Angular 2, React, polymer and Lightning are on rise. From movie Spider man, this dialogue stands very true – With great power comes great responsibility.

As a web developer, its our job to make sure the application implemented by us, stands on performance benchmark and at the same time development time is reduced. To achieve this, fast and effective troubleshooting of web application becomes integral part of project development. One of the best tool to troubleshoot web applications are available freely – Google chrome developer tools.

In this blog post, we will uncover lots of tips and tricks about using chrome developer tools.

To launch, chrome developer tools in chrome, use shortcut ctrl+shift+I or ctrl+shift+J. We can directly execute Javascript in chrome dev tools without creating any html or javascript file.

Console API

we will start with console API of chrome developer tool first.

Printing Debug statements in Javascript

we can use various methods of console in javascript to debug our code. Previously, if we wanted to debug JavaScript, alert methods were mostly used however they were very annoying. Below code snippet shows available methods to print debug statements in chrome console.

	console.error('Google chrome dev tools - error');
	console.warn('Google chrome dev tools - warn');'Google chrome dev tools - info'); 
	console.debug('Google chrome dev tools - debug'); 
	console.log('Google chrome dev tools - log');  

Below is output, how its displayed in chrome

Console.log levels
Console.log levels

As shown in above image, different log levels of console method printed in different color. error log level even prints complete stack trace of methods showing origin of error.

How to use Symbolic Link to move Google Chrome AppData folder to other location

Few months back I bought a new high end laptop with i7 processor and 16GB of RAM. Decided to give a shot to “SSD hard disc” over conventional hard disc. Performance of my system is incredibly fast, I have SQL Server, Jenkins, Command line Dataloader jobs, Apex static code analyzer all running almost at same time. Windows OS boots up in almost 2-3 seconds only, as compared to 15-25 sec previously. However because of decision of “SSD Drive” I had to compromise storage capacity. My “C” drive is only around 150 GB however D drive has lot of space. After analyzing many folders, I found that google chrome browser creates its temporary folder in “C” drive even though I have installed it explicitly in “D” drive. I wanted to move “Appdata” folder of google chrome to “D” drive to make sure I have enough space in “c” drive.

I came across “Symbolic link” concept in operating System. In “Symbolic link” folder points to other location and its very useful technique to solve problem of storage. We can create symbolic link of many folder from “c” drive to any other location where we have good enough space. 

Top Google chrome extensions for Salesforce

1. Salesforce ORGanizer by Enrico

The ORGanizer Chrome Extension [BETA] lets you forget about your® username and passwords and help you to recognise® tabs on your browser.

salesforce chrome extension organizer
salesforce chrome extension organizer

With Salesforce ORGanizer you can:

  • Store your frequently used accounts (basic encryption for password, details on the guide): username / password / login url / landing page
  • Login an account on a new tab, window and window on incognito mode or get the full login URL for other browsers
  • Change an ORG tab and title to instantly recognize which tab belongs to which ORG
  • Use the built in Quick Link tool to quickly access your most used standard Salesforce links
  • Create your personal ORG’s quick link library to handle special links
  • Use the Quick Links tool to make a global search or open a custom relative link (e.g. from a copied Salesforce ID) or login to another ORG
  • Use the Quick Console right inside your Salesforce tab to have quick access to describe manager, queries, execute anonymous and other handy tools

download it from here.

2. Salesforce DevTools

Salesforce Dev tools - Chrome Extension
Salesforce Dev tools – Chrome Extension

Salesforce DevTools is a simple but powerful developer chrome extension for doing the below things :

  • Salesforce data modal (ERDs) generator (My Favorite)
  • Powerful Apex debug log viewer
  • Easy export definition of objects to Excel file
  • Display fields API name on Salesforce object detail page
  • Quick generate Apex code / SOQL
  • Quick access to new record page, list page and object setting page of any object
  • All Check / Select on profile edit page and field permissions edit page.

download it from here.

3. Salesforce Developer Tool Suite by

Does it takes a lot to view debug logs i.e. via setup area or dev console. This extension is an attempt to make this use case simple, by making debug logs visible in 2 clicks, without leaving the current Salesforce tab. Plus, you get a better hierarchical view of debug logs, which are better to analyse.

I have lots of expectation from this extension as this is the one of extension which takes feedback actively (You can find discussion tab just inside app) and frequently releases new capabilities. More features, like Execute Anonymous, Code Coverage, Test Cases are in pipe, will be released soon.

Chrome extension - Salesforce Developer Tool Suite
Chrome extension – Salesforce Developer Tool Suite

install it from here. you can find more about this extension on company blog page.

4. Salesforce Navigator

Second in my list is “Salesforce Navigator” and I cant live without it a single day. On average, it saves more than 50% of my clicks needed for administration. My shortcut for this utility is “Ctrl + Alt + Space” and I guess this most used combination on my system. Using this utility, you can directly navigate to any setup page like Object, Apex class, Pages, Workflow rule etc.

Salesforce Navigator - Google Chrome extension
Salesforce Navigator – Google Chrome extension

install it from here.

Table with Sorting and Searching using AngularJS

I hope, from last article you got basic information about AngularJS. This time, I will demonstrate how to add basic Searching and Sorting capability to data table using AngularJs.

Output will look something like this :

Searching and Sorting in Table using AngularJS
Searching and Sorting in Table using AngularJS

Prerequisite Libraries :

  1. UnderscoreJs
  2. Bootstrap CSS
  3. AngularJs

Servlet, Hibernate, jQuery and Ajax based google like chat

Hi, In this article, my aim is to create an application which uses the concept of Hibernate in Servlet with Ajax support of Jquery.
Below figure can give you the idea of final look and feel of the complete application:

Servlet, Hibernate, jQuery and Ajax based google like chat
Servlet, Hibernate, jQuery and Ajax based google like chat

Google Desktop Search in Folder

Google desktop from Google has been discontinued, so below article will not be useful.

Now days, the requirement for hard disc in personal computer is increased dramatically. And if the size increased then necessity of software to manage the files and folders also increased.

To manage the documents and easy search, you can convert your system in “Google search enabled System” by just downloading Google desktop from here.

To enable the google search any time click cntrl Key twice and you will get your own google.

Google Desktop SearchJust start typing, you will get two options:

  • Search on Desktop
  • Search on Web

Earn more from google adsense – Tips to earn money

  • Match your Adsense colors with your site colors.
  • Do not use borders to your text ads.
  • Use link units in your site. Link units near site navigation links can perform well. also  link units don’t need too much Ad space on your site and link units are not annoying to users.
  • Use Google site-specific search box with Adsense. This is the best option other than content targeted ads. You have option to select ad location on your site search result page. Put Adsense ads at the top and bottom of search result page. The best location of Google search box is – top right corner of your site.
  • Prefer Text ads instead of image ads. This will increase probability of more user interested ads. I will to suggest keep the text and image ad formats for your site. Use text and image ad format for following type of ad formats:
  1. 250í—250 Square
  2. 160í—600 wide skyscraper
  3. 336í—280 large rectangle
  4. 300í—250 medium rectangle. These are best performing ad units and will also increase your ad inventory.
  • Use section targeting to target ads relevant to your site or page content. Section targeting code is nothing but code tag provided by Google to direct their crawler to show relevant ads to page content. Use section targeting code on each page.
  • Ad placement is important. Place the Adsense ads above the main fold, means user should see your top performing ad units without scrolling down on your site. This will increase Ad CTR.
  • Use Google Adsense ad preview tool can help you to view all ads showing on your site and also helpful for blocking irrelevant ads.
  • Study your keywords. Target ads to these keywords. If you are not using section targeting Adsense feature then don’t forget to add your page-targeted keywords in the beginning of your post. Google Adsense crawler generally searches for first one or two paragraphs to target ads to that page.
  • Placing images above or next to the ad units will increase ad visibility and more chances of click on such ads increasing your CTR.
  • You can use “heatmap“ provided by Google to analyze other top performing ad placement slots. See the Image below. Ad slots with dark color are hot spots than the faint ones.
  • Track all ad performance using Channels. Channels are nothing but individual ad units, which you can track for performance. Study the Adsense revenue report in detail.  Don’t keep on changing ad formats, colors and placements every one or two days. Track the ad unit placement at least for 2 weeks to judge the ad slot performance.
  • Optimize your site for search engines. SEO is the key point for high traffic websites. Moreover traffic from search engines can convert well in case of Adsense ads. Users coming from search engines are clicking more on your Adsense ads than regular readers.
  • Ads placed in-between the content perform well. But keep in mind this can be annoying to your site readers. So avoid too much of blended ads in content.
Categorized as SEO Tagged

Google Adsense Policy – Points to remember

Before Using Google adsense, the beginner must understand that what should be avoided with Google adsense.

Following are some points to remember about google adsense.

  • Don’t alter the Adsense code other than fonts and colors.
  • Do not click on your own Adsense ads by any way.
  • Do not increase Adsense ad impressions with some automating tools.
  • Don’t ask others to click on your ads.
  • Don’t put Adsnese code on adult or prohibited content.

We cannot fool google by clicking on own adds using any proxy setting or same workgroup computers.

So be careful while trying anything illegal with google adsense. your account can easily be blocked.

Please wait for my Next article on tips about how to earn more using google adsense.

Categorized as SEO Tagged

Add FeedBurner in Blog and Enable Subscribe by email

To add the Feedburner in you blog, follow below steps:

Get the RSS Feed path of your blog and go to :

then enter the path in Textbox displayed:

Add Blog URL for RSS in FeedBurner

After that follow the onscreen steps.

And that all, you have done it.

Add option to add by Email

As shown in below image:

Enable Subscribe by email in Feedburner

GO to Publicize and select Email subscription,

it will provide you one code, copy and paste that in you blog and the component is ready to use.

Output will look like:

Subscribe By Email Feedburner