Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML Build a Simple Website Website Basics Changing Background Colors

Preview in browser

How do I set Sublime Text 2 to preview my coding in the Chrome browser?

I guess it depends on what is easiest for you, but they all require you know where you saved the file, and where you're at when you want to open it. If you have either it or a shortcut/alias to it sitting in front of you, unless you made some changes to your system, you should be able to simply double click and it will open in your native browser. If Chrome is not your native browser, you'll need to set that up.

But again, the key is knowing where you saved the file, which may require from Sublime Text 2 going to File>Save As to see where files are being saved and, if you want, changing the location. What I do when I'm doing my testing is save the file(s) I'm working on to either the desktop or a folder I created on my desktop, for easy access (you can always drag and drop the file somewhere else later on, and if you're using relative paths, it won't impact its functionality). Alternately, if it is in part of a program (such as Wordpress) I create a shortcut (PC) or alias (Mac) for the folder it's in and drop that on the desktop. That way I have easy access to it all the time from my desktop.

Of course, if the double-click option isn't opening Chrome, you do have 3 other options available to you: 1) Use the drag and drop method as James Eden suggests. 2) Use the File>Open method Joe Bissell suggests. 3) Or, my favorite one: right click and choose "Open with" and then select the browser you want to choose.

I prefer the right-click method because for me it is the fastest. All I have to do is right click, hover, and usually the option I want is on the list that is displayed (I use Mac, so PC may be different).

You might want to play around and see which options suit you best in which situations. If you're already in the browser, the File>Open may be easiest (though my thinking is "Why? My desktop is a single click away..." The drag and drop thing is not one I like because sometimes I unintentionally drag and drop it to the wrong program, or the Chrome/Safari/Firefox/IE icon isn't readily available. To me, I just think that the choice between double-clicking or right-clicking is the most systematic and therefore the easiest alternate option to double-clicking.

But that's a personal choice you have to choose yourself. :)

Joe Bissell
Joe Bissell
13,107 Points

Dis guy ^ is the boss.

Kudos for writing that, haha :)

6 Answers

Thanks to all of you, Drew, Joe and James. The info you provided was extremely helpful.

Lauren Clark
Lauren Clark
33,155 Points

Cmd + B in Sublime Text opens the current tab you're editing in your default browser. (I assume Windows equiv is CTRL+B can anyone confirm?)

If you're working with a server side language such as PHP you'll need to open it through your local server (MAMP, LAMP etc) You can do this with a keybind, either within Sublime or use Quicksilver or Alfred(Pro) to open localhost in your default browser.

Edit: Not sure if this is standard in Subl 2! Sorry.

James Eden
James Eden
1,539 Points

Hi, Just literally drag the file [index.html] into the Crome window... Or inside Chrome go to File/Open... as if you're opening a document, locate your file and hit OK.

Refresh the Chrome page every time to see changes. Or hit Cmd-r on a mac. Not sure what it is on Win... J

Joe Bissell
Joe Bissell
13,107 Points

Same for windows basically, just right click on the file created with .html extension and open with whatever browser. You can also right click in Sublime Text and click 'Open in browser'. That will open it in the default program used to open that file.

To refresh, F5 for windows.

Owen McFadzen
Owen McFadzen
5,718 Points

Another option might also be CodeKit. Its not free (trial or pirate I guess) but its one great piece of kit. http://incident57.com/codekit/

Owen McFadzen
Owen McFadzen
5,718 Points

Another option might also be CodeKit. Its not free (trial or pirate I guess) but its one great piece of kit. http://incident57.com/codekit/

Thanks Owen and Lauren. I'm currently using Notepad++ which is working fine and since I'm a newbie and am working with building a simple website, I am not advanced enough yet to know anything about server side language. I've taken a previous suggestion for my "preview in browser" issue which is to create a shortcut on my desktop that I can double-click in the event that my browser tab gets closed.