Edge Inspect + JS Bin

An efficient mobile web workflow: Using Edge Inspect with JS Bin

One of the big benefits of Edge Inspect is that it helps to shift the testing of a web site to an earlier point in the development process and can significantly reduce the time and effort required to find, fix, and retest issues. Integrating third party tools like LiveReload with Edge Inspect can improve this feedback loop even further.

With the release of Edge Inspect, we have added integration with JS Bin allowing users to easily view and test their bins on their mobile devices. This blog post is the latest in our Workflow series, which highlights how Edge Inspect integrates with other tools and services to help you work as efficiently as possible.

JS Bin Overview

JS Bin is a powerful, free tool that allows you to create, edit, and share pastebins for your HTML, CSS, and JavaScript. Bins can be edited with their results rendered directly in your browser. This makes it particularly useful for developing simple prototypes and proof of concepts as well as creating test cases in order to help demonstrate and debug a problem with a web site’s rendering.

 

The JS Bin 'Welcome'

 

Using JS Bin with Edge Inspect

Using JS Bin and Edge Inspect is simple – there’s really no additional setup required, just go to JS Bin in Chrome and use JS Bin.

When you first navigate to JS Bin all of your devices connected to Edge Inspect will follow along. Once you start viewing or editing a specific bin, devices connected via Edge Inspect will update to show only JS Bin’s Output view.

Select the JS Bin code panels you’d like to use and create a new bin by clicking ‘JS Bin’ -> ‘New’ and start editing the HTML, CSS, and JavaScript.

 

Creating a new JS Bin bin

 

Not only will Edge Inspect ensure your devices show only the Output, but JS Bin provides live remote rendering for bins so that all of your devices are updated with your latest bin code as you type.

 

Live updates in JS Bin as you type

 

All Edge Inspect features, including Remote Inspection, are still available and can be used to assist in debugging your bins.

Better than pictures, here is a video of Remy Sharp, creator of JS Bin, giving a quick demo of the JS Bin integration with an beta version of Edge Inspect (formerly called Shadow).

Thanks to Remy for working with us to make this integration possible!

If you need to try out some new code, create a test case or fix a bug, the fast feedback loop when using JS Bin with Edge Inspect is a combination that is hard to beat.

Matt Johnson
Sr. Software Engineer
Adobe Edge Inspect

This entry was posted in Workflow enhancements and tagged , , , , . Bookmark the permalink.

2 Responses to "Edge Inspect + JS Bin"