CrossBro - A realtime multi-browser refresher utility

Update: 12 Apr 2012

UPDATED: CrossBro is a browser development tool designed to automatically refresh multiple web browsers as you work. Works great and extends capabilities of Adobe Shadow!

Download CrossBro Now!

(CrossBro_v0.9_Free_Version.zip)

Why do I need CrossBro?

New to HTML and CSS? Want visual feedback of html inconsistencies? Fed up pressing the 'refresh' button to see your code edits - then this is the tool for you!

If you prefer working in one favourite browser or developing code for multiple browsers (Firefox, IE or Chrome) then Crossbro can speed up your workflow. Edit your HTML, CSS files and see your code changes appear in realtime, Feedback is immediate and errors can be spotted and corrected on the fly.

Easily spot margins, borders, colours, tables, floating elements, script errors (to name but a few) and correct them immediately. Become an expert coder in record time!

How does it work?

Simply drop your code files into CrossBro, select an HTML file to refresh and start coding.

CrossBro monitors selected source files (html, css, js, xml etc) for edits and automatically loads or refreshes the results in your chosen browsers. CrossBro continues to monitor your files and browsers for subsequent changes and updates the browser windows instantly!

Features

- CrossBro is FREE (v0.9 only).

- True interactive cross browser development.

- Automatically refreshes multiple industry standard web browsers

- Use your favourite source code editor (tabbed or otherwise)

- Monitors multiple source files HTML, CSS, JS, etc.

- Supported browsers : Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, (Opera and Safari anyone?)

- Very small portable utility!

- Windows software (XP, Vista, etc)

Future (if enough interest exists!)

More browsers support

Updates

NEW - v0.91 (Beta) - 12 April 2012

User requested feature: Remote inspection

URL textbox: If a URL is typed here and Activated as the item to be refresh in the browser, you will be able to edit a source file (e.g. PHP) on a local server and have a different item refreshing in the browser as the source file is being edited.

Work brilliantly with Adobe Shadow. You can now extend Adobe Shadows capabilities by editing any file e.g. php and automatically refreshing the browsers set URL while editing the code.

http://labs.adobe.com/technologies/shadow/

The Zip below contains the v0.91 Beta executable only.

Please download and install the Full free version (v0.9) and copy the Beta executable file into that location to use...more soon!

Thanks Rikkert!

Reviews

http://www.css-einfach.de/artikel/crossbro/

(German text. Please translate using Google Translate)

Disclaimer

This software is still in 'work progress' and some bug may still exist. The software is in a stable condition and usable but if you choose to download and use this software you do so at your own risk.

Freeware version

This software is freeware (v0.9 only) for private or commercial use. License is granted to freely distribute the software on websites, magazines, etc as long as no cost is associated with its use or download (although it would also be nice to receive feedback on how you find using the software) :)

Bugs

Some minor issues still exist in the software and will be corrected in future versions.

**Getting Started ---Work in progress, typos, etc, below this bit!**

**Please watch the CrossBro video tutorial above until this text has been finalised!**

Zip file

Extract the files from the Zip file. 9 files should be included. six images and one CrossBro executable

Crossbro.ini and CrossBro.txt file.

Application

Double click CrossBro_v0.9.exe to begin.

Options

CrossBro needs some settings to begin, Select the top menu [Extras] and then choose [Options].

Browser locations, text editor, and default browsers can all be set here.

For CrossBro to interact with the browsers you are required to locate them. Press the default button if they were all installed to a standard location or edit the locations using the [Locate] button provided.

Window title

For CrossBro to work its magic and jump smoothly between editor and browsers properly you have to set Window names for each browser and editor. This Window title is easily found by opening the browser or editor and looking for text that is always visible on the top bar. For example: "Programmer's Notepad2" is always shown so simply put this exact text in the editor window field e.g. programmer's notepad2. If you can't edit the source from inside CrossBro then check the title names match.

Default Browser checkboxes: this selects which browsers should be loaded for refreshing.

Press the Save options to exit this window. One more file has been created in the application folder CrossBro.ini. This file contains key setup information provided above.

Close CrossBro completely and restart for the changes to take effect.

Using CrossBro

CrossBro now needs some files to monitor. Simply drag the project files (files only, not folders) you wish to edit into the window and they will appear in the central list box. All files in the list are now being monitored for any changes (a text notification is also shown above the buttons)

Example walk through if you dragged two files into your list, an HTML file and a CSS.

  1. Select the browsers you wish to view the HTML file using the checkboxes on the botton of the screen. e.g. MF (Mozilla Firefox)
  2. Select your html file from the list and press the Activate HTML button. Firefox should open up with the html file in view. If multiple browsers were chosen then they will all load with your html file.
  3. Move the firefox window out of the way (or onto another monitor).
  4. The html file can now be edited in your favourite text editor (remember to set it up in the options screen). Any changes will be reflected immediately in Firefox.
  5. Since the html file in in Firefox you can now edit the HTML source. You can either select Edit Source and your html file will be ready for editing in your text editor, or open the file externally, but in the same editor set in the CrossBro options screen. Any saves you do will show immediately in the browser window.
  6. ...... more soon!