100% Apple Development tools?!

Yes, it’s true! I know you think I’m mad for even considering using anything but Chrome with SublimeText2 or 3 or whatever. After all, Chrome has dominance over the rest in browser share (something like 80% last I read) and has some rock solid dev tools built in while FireFox still uses Firebug to do most dev’s heavy lifting very well. TextMate was all the rage when Rails was king but this is the internet business and kings fall fast around here. Now anyone not using Sublime Text is labeled a heretic. Unless of course you’re using vi in a terminal and then you’re just “keeping it real”.

Xcode and iPhone Simulator Setup

This is my general setup when I’m working on an iPhone app. These two apps cannot be separated.

One of my projects is a mobile app using Phonegap for IOS. Developing for the iPhone is great fun but it does have some serious drawbacks. Namely, Xcode and Simulator. To make sure that your app works on an iPhone you’ll need to use the Simulator application provided in the Apple Developer SDK. Apple is known for three things; Steve Jobs, great looking products, and insanely overbearing control of all aspects of their realm. You want to use a Mac? Better use OSX. You want to charge your phone? Better get the special connector. You want to develop apps for OSX or IOS? You better use Xcode and Safari alongside your standard toolset. Sigh.

Cursed was I! Cursed, I say. Well… not so much.

Safari Developer Tools

A real Javascript console in Safari? Yep, but it’s still a little buggy.

Turns out that Safari now has a full set of developer tools built in! Has a lot of the look and feel of Chrome and Firebug and all of the functionality. Dom inspection, xpath trees, resource lists, network activity, and… wait for it… a full console. Not that big a deal until you realize that means no more bouncing from browser to browser to check my JS in an app. I can load up in Safari and work “as usual”. Frankly, I think Safari is actually faster on OSX than Chrome. That’s so Apple.

So far so good but I was still stuck with Xcode giving me CSS files with no code coloring or hinting. When I was doing Objective-C it had more hinting than I could stand! I had to stop the thing from writing my code for me. With HTML, CSS3, and JS it seemed a bit lacking. So I did some digging. It turns out that you can manually set a document to the correct code hinting and coloring! From the top menu go to Editor > Syntax Coloring > [doc type]. Xcode seems to not be smart enough to apply the rules to all files with the .css mime type. I had to manually set each file that was not recognized.

Now I have a full on IDE that opens my Phonegap app in Safari (Open in External Editor command) so I can develop my app outside of Simulator with full browser dev tools and the same Javascript engine that the actual app will run. If it works in Safari, it’ll work on the iPhone web view.

Not the dreamiest situation but it’s way better than it used to be.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s