Edge Inspect integration with Edge Code and Brackets

Edge Inspect is integrated with Edge Code and Brackets

Edge Code and Brackets icons

The Edge Code team has created a new Brackets Extension called the Edge Inspect CC Extension for Brackets. The extension is already included in the new Edge Code CC (Preview) release. This new extension provides the ability to use Edge Inspect to test content directly on mobile devices during development in Edge Code and Brackets. CSS, HTML and JavaScript changes are reloaded when the changes are saved. Once you see your work being updated on your devices while you code, you’ll wonder how you ever coded any other way.

You can download Edge Inspect and Edge Code from the Creative Cloud with a free Creative Cloud membership.

Edge Inspect Extension for Brackets is now Open Source

You may be happy to learn that the Edge Inspect extension is open source with an Apache 2 license. It can easily be added to Brackets – you can grab it by pasting this URL:

https://github.com/edge-code/edge-inspect-extension

into the new Extension Manager (File > Extension Manager…), or download it from the repo on GitHub. We hope to see the community begin using and contributing to the project.
screenshot of Brackets' Extension Manager

 

Try it – see your devices update while you code

Here are a couple of workflows that you can try:

Workflow 1

  1. Edit your code in Edge Code or Brackets
  2. Turn on Syncronized Browsing in the Edge Inspect panel in Edge Code or BracketsEdge Inspect panel seen in Edge Code
  3. Launch Edge Inspect on your devices and connect to your computer
  4. After each file Save (.html, .css or .js) you’ll see the devices reload

Workflow 2

  1. Edit your code in Edge Code or Brackets
  2. Turn off Syncronized Browsing in the Edge Inspect panel in Edge Code or Brackets
  3. Start Live Preview to see the page loaded in Chrome
  4. See Live Highlighting in the browser as you click in CSS elements
  5. See changes to CSS update in Chrome instantly
  6. After each file Save (.html, .css or .js) you’ll see the devices reload
  7. Turn on Syncronized Browsing in the Edge Inspect Chrome Extension
  8. Launch Edge Inspect on your devices and connect to your computer
  9. Note: Live Highlighting does not show on devices – yet

Future improvements

Currently, the port that is used for Live Preview is blocked, so the devices are not updated when using Live Preview. In the future, we hope to have a smoother workflow where the devices will be updated in real-time as you are coding, and doing the right thing whether you’re in Edge Reflow, Edge Code, Brackets or Chrome. We still have some work to do to get where we want to be, but it is already pretty awesome.

Let us know what you think, and help us spread the news by telling someone else who could benefit from these workflows.

Bruce Bowman
Sr. Product Manager, Edge Tools & Services
twitter: @brucebowman, @edgeinspect

About Bruce Bowman

Sr. Product Manager, Edge Tools & Services, twitter: @brucebowman, @EdgeInspect
This entry was posted in Announcements, Workflow enhancements and tagged , , , , . Bookmark the permalink.