Microsoft Visual Studio Code with Debugger for Chrome for Static Website Pages

Hi all,

Have you used the Microsoft's free VS Code editor for you web development. I think, you should try it.

Today I'll discuss about how to debug from the VS Code without placing breakpoints on Chrome browser.

Pre-requisites

1. VS Code should be installed
2. Debugger for Chrome extension in VS Code

Configuring the debugger

• Once you open your website in the VS Code
• In the activity bar, you will find the debugger icon OR you can use the keyboard shortcut Ctrl+Shift+D
• Now, we will "Add Configuration" to our project
• On top of the debug sidebar, you will find an option "Add Configuration"
• Click on "Add Configuration"
• It will prompt you to select out of box provided options like "Chrome, NodeJS"
• Choose Chrome
• Now, launch.json file will be created
• Configure the launch.json file by specifying URL with port number
• Since, our project is of static webpages type, instead of webRoot, we will use "file"

Here is the sample launch.json file

{

// Use IntelliSense to learn about possible attributes.

// Hover to view descriptions of existing attributes.

// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

"version": "0.2.0",

"configurations": [

{

"type": "chrome",

"request": "launch",

"name": "Launch Chrome for my website",

"url": "http://localhost:3001",

"file": "${workspaceFolder}/index.html"

}

]

}

Debug

• Click on the "Start Debugging" button OR press F5
• A new chrome window with debugging enabled will be launched
• Place your breakpoints in VS Code, just by clicking left to the line number in the editor
• Perform the action and your debug will be hit
• Note: You can add conditional debugging by editing the break point

Happy debugging.

Please send your review and comments to psrdotcom@gmail.com

Eclipse Java Scrapbook: Run, Debug, Test Code Expressions and Statements Without Running Entire Project

Hi friends,

A very useful utility for developers who are using eclipse as their IDE is Java Scrapbook.

What is scrapbook?

Sometimes, you might think like running a statement or expression or loop without running the entire code or project. You want to try something without disturbing the existing code.

Scrapbook answers the above and lot more.

Scrapbook can be used to inspect, execute, debug your statements, expressions, loops and etc.

Creating Eclipse IDE

New -> Java -> Java Run/Debug -> Scrapbook Page

Inspecting Snippet

To inspect an snippet like 2+3, Just type 2+3 and Click on "Run->Inspect" as per your requirement. It will display the result in a pop-up.

Execute Statements

If you want to try some statements, you can execute it by performing "Run->Execute"

Debug Statements

You can put breakpoint and debug your code.

I liked it very much because we no need to run the entire project to test/try a sample code.

Hope all the developers will like this feature.

Note: Please send your feedback to psrdotcom@gmail.com