facebook

Webclipse Features

<style> #customAnimation #bodymovin-container{ padding-bottom: 65% !important; } </style>

 

Get the missing pieces of Eclipse with the Webclipse plugin—full of tools designed to improve the modern coding experience.

  • Angular IDE makes it simple to create complex web applications with Angular and TypeScript
  • JSjet provides superior JavaScript and TypeScript support with content assist, debugging and more
  • Code Live connects the browser to the IDE for quick navigation to the source and live previewing
  • Terminal+, Slack Integration and Navigation Aids power up your development

Angular IDE

Angular is revolutionizing front-end development by simplifying the creation of complex web applications. Our Angular IDE by Webclipse is built specifically for Angular. Content assist and validation for TypeScript 2 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.

Webclipse featues: Angular IDE
Webclipse featues: JSjet

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.

Debugger for JavaScript & TypeScript

With Webclipse you can now debug your JavaScript, TypeScript, (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 code using the standard Eclipse editors and use familiar execution commands without needing an active debug session. Hot-swap allows you to instantly see 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.

Webclipse features: JavaScript Debugging
Webclipse features: CodeLive for Angular

CodeLive

CodeLive provides a bridge between the IDE and the browser, speeding up web development. From the browser you can view a list of files or Angular components used to load the page, and then open a file or even jump to the code for a specific element on your page. And for Java EE web site development, you can use Live Preview to 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! You can view changes in multiple browsers simultaneously and even use mobile simulators to knock out all your testing at once. 

 

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

Webclipse features: Navigation Enhancements
Webclipse features: Slack Integration

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