This content originally appeared on Level Up Coding - Medium and was authored by Keerti Kotaru
Use Google Chrome’s Snippets to save time and organize scripts. Read through to find out how the feature is useful while debugging web applications.
Debug like a pro with Google Chrome
While debugging web applications, we often run scripts in Google Chrome console. It is a very useful tool that not only provides access to variables, but also allows updating a page, set a value in the session storage / local storage etc.
I often come across a situation where I’m debugging 7th or 8th screen in the application, and I can’t directly launch it without setting context. Hence, use the Chrome Dev Tools to run few statements and set the needed context. However, it’s easy to lose this script. I end-up typing in the code every time I come across this situation.
There is an easier way to maintain these scripts in Google Chrome — that is Snippets. Notice, the snippets tab under Sources in Chrome Dev Tools. See the figure-1 below.
Use Case
Before detailing Snippets, let me begin by elaborating a sample use case. I created a small application with a form and login functionality. The sample application and its features don’t have any significance. Its purpose is only to help understand the usage of Snippets.
I take the example of login, which sets an auth token in session storage. Till the auth token is available in the session storage (which is the context application needs), the rest of the functionalities doesn’t work.
To avoid going through the login process every time, run the following script, which retrieves auth token, user name, and sets it in the session storage.
My sample is simplistic with a single page. However, real applications would have few more pages and hence it’s tedious to login and navigate to say, the eighth page to debug every time.
-------------------------- Snippet-1 --------------------------
// Make a call to retrive auth token, with all the needed parameters
fetch('https://<some domain name>/auth', { method: 'GET' /*few additional needed parameters*/ }).then(httpResult => httpResult.json()
.then(resultJson => {
// take all the fields required and set in session storage
sessionStorage.setItem('authToken', resultJson.authToken);// My sample shows name too, obtained from the remote service.
sessionStorage.setItem('userName', resultJson.firstName + ' ' + resultJson.lastName);return;
}), err => console.log(err)) // not much to error handling, feel free to play with it.
// remember, fetch doesn't reject the promise unless it's network error (off-topic).
location.reload() // do it if your sample needs it. Sometimes, it might redirect you back to home screen, defeating the purpose.
Running this script sets the auth token and user name context in the above sample application. See the result below, in figure-3.
Maintain the scripts in Snippets
We may maintain these scripts in Snippets. This saves time typing in the lines of code every time we debug.
Create a new Snippet
To create a new Snippet navigate to snippets,
Launch Chrome Dev Tools → navigate to Sources → under the menu next to page, choose Snippets. See figure-1 above.
Alternatively, launch Chrome Dev Tools → Use Ctrl + P (Windows) or Cmd+ P (Mac) → use the symbol > in the text field. It lists all actions we may perform in the dev tools. Find and select Create new snippets. See figure-4 below.
Type in the script and save.
Keyboard shortcut to launch Chrome Dev Tools is Ctrl+ Shift + I (Windows) / Cmd + Option + I (Mac)
Run a Snippet
To run a snippet, navigate to Sources → under the menu next to page, choose Snippets → right click on the snippet and choose Run. See figure-5A below.
Alternatively, use Ctrl + P (Windows) or Cmd+ P (Mac) → type exclamation (!), which lists all the saved snippets. See figure-5B below.
Export Snippets
We can export and distribute the snippets (in the team). This will help others in the team take advantage of the useful scripts. However, there is no easy way to export and save the snippets. Following is a quick hack.
To export a snippet, launch Dev Tools of the Dev Tools. That is, launch Chrome Dev Tools in a separate window ( do not dock with the web page). Select the Dev Tools window and use Ctrl+ Shift + I (Windows) / Cmd + Option + I (Mac) again. It launches a second dev tools window.
In the second Dev Tools window, run the following line of code to export the snippets
InspectorFrontendHost.getPreferences(p => console.log(JSON.stringify(p.scriptSnippets)))
It prints snippets on console. Copy the result and share it with others. They can run the following line of code. Again, they need to launch Dev Tool for the Dev Tool.
InspectorFrontendHost.setPreference("scriptSnippets", "Exported Snippet goes here")Relaunch the browser to find the snippet installed.
Before we wrap, know more about me and my opinions here, CodeVenkey / Twitter
References and links
- Google Chrome Documentation for Snippets- https://developer.chrome.com/docs/devtools/javascript/snippets/
- Six useful Snippets created by others — https://www.telerik.com/blogs/6-snippets-to-keep-in-your-chrome-devtools
Snippets in Google Chrome was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Keerti Kotaru
Keerti Kotaru | Sciencx (2021-05-14T00:52:13+00:00) Snippets in Google Chrome. Retrieved from https://www.scien.cx/2021/05/14/snippets-in-google-chrome/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.