Webclipse Features

 

Webclipse is a suite of add-ons that delivers the missing pieces of Eclipse to improve the modern coding experience. Our Angular IDE provides everything you need to create complex web apps using Angular 2. JSjet provides superior JavaScript and TypeScript support, CodeLive allows for easy navigation between the browser and source code, and Live Preview lets you instantly test your code in multiple browsers. Add in tools like Minimap, Project Explorer+, Breadcrumbs, DevSearch, and Eclipse Code Sharing for Slack to take your development to a whole new level!

Angular IDE

Angular 2 is revolutionizing front-end development by simplifying the creation of complex web applications. Our Angular IDE by Webclipse is built specifically for Angular 2. Content assist and validation for TypeScript 2.0 and HTML templates speed development and let you code with confidence. A simple wizard and intelligent Terminal let you bypass the normally tedious setup process and provide repeatable, reliable configurations across multiple projects and teams. Our Angular CLI integration encourages best practices, allowing you to seamlessly move between the IDE and command line for a simplified, yet powerful workflow.

JSjet for JavaScript and TypeScript in Eclipse

JSjet brings modern JavaScript (including ES6) and TypeScript to Eclipse. TypeScript is a typed superset of JavaScript that is quickly becoming the go-to language for web development. A powerful inference engine allows JSjet to build a more accurate model of resources resulting in exceptional content assist, occurrence highlighting, call and type hierarchies (for JavaScript), and an outline view. Extensive syntax highlighting along with fast, accurate validation are just a couple of reasons you will love web development in Eclipse with JSjet. Plus, with the ability to jump to declarations, rename refactoring and source formatting, you’re bound to find a favorite.

JavaScript Debugger

With Webclipse you can now debug your JavaScript, (X)HTML, JSP and Node.js files from Eclipse. Java EE applications launched from Eclipse are rendered in the Google Chrome browser for effortless debugging using the standard Eclipse Debugger interface you are accustomed to. Now you can set breakpoints in your JavaScript code using the standard Eclipse editors and use familiar execution commands without needing an active debug session. Hot-swap allows you to instantly see JavaScript changes reflected in the browser without reloading the page, a real time-saver! Source map support simplifies debugging even the most complicated generated JavaScript code.

CodeLive

CodeLive includes tools to speed up web development in Eclipse. Live Preview lets you instantly view changes to HTML, CSS and JSP within your normal Java EE development workflow without a browser plugin or debug session. Imagine the time this will save! Plus, you can view these changes in multiple browsers simultaneously and even use mobile simulators to knock out all your testing at once. The Dashboard lets you view a list of all files used to load the page and quickly jump to the source. Use the Magic Wand tool to jump from an element on the page directly to the source code. 

 

Enhanced Navigation

Navigation enhancements may seem small on the surface, but equate to big time-savers in the development lifecycle. The Minimap provides a condensed view of the entire file from which you can quickly jump to a specific section of source code, allowing you to better navigate long source code files. The Project Explorer+ is an alternative to Eclipse’s Project Explorer that includes powerful search and filter capabilities, providing an easy way to quickly locate your project resources. Breadcrumb Navigation allows you to quickly navigate through your workspace and open files for editing. DevSearch allows you to quickly search the most commonly used developer resources to get fast answers to your questions.

More on Navigation

Eclipse Code Sharing for Slack

We understand how important effective communication is for a development team. With Slack integration it’s now easier than ever for your team to stay connected and produce quality code. With Eclipse Code Sharing for Slack you can quickly send code snippets to your peers for discussion, and view and comment on code sent to you. When a teammate shares a snippet of code, you immediately receive notification and the code snippet in Slack. If you have the same project open in your IDE, you have the option to view the code directly in Eclipse.

More on Team Collaboration

Is this what your day looks like developing Java EE and Web Services in Eclipse?

Webclipse

Webclipse gives you the tools you need to improve the modern coding experience from within the Eclipse IDE you know and love!

Crying because your beautiful code has an ugly side

Ever created a beautiful web page only to later discover it’s not so pretty in another browser? Live Preview takes the guess work out of web development. Instantly view your changes in multiple browsers and rest assured that your page is always a beauty. Learn More

Pulling your hair out looking for a bug in your JavaScript

A powerful debugger is one of the most important tools a good developer needs in his toolbox. Now you can develop powerful web applications from within your Eclipse IDE and use the powerful debugger features you are accustomed to. Learn More

Struggling with difficult code
With Eclipse Code Sharing for Slack, just send that problem code to a teammate for some help or inspiration. Great teamwork everyone!

Tutorial Sneak Peek

An interactive tutorial is included for each key feature in the Webclipse suite.  Here’s an example of the JavaScript Debugger tutorial.  This helpful tutorial has you play along, working between the editor in Eclipse and the output in the Chrome browser to get a real feel for the feature!

JSDebug tutorial