Cannot get Live Edit / Open in Browser (Chrome) to work for Webstorm 6

Hey all!

I'm very new to Webstorm 6, but I have searched extensively on how to fix this issue. I have Live Edit checked and the Chrome extension enabled. I believe my problem might have to do with how I setup the project. I made a new project from existing files that I was previously building with Notepad++. When I made the project in Webstorm, I designated the correct directory as the root.

When I try to use "Open in Browser," the file loads, but all of my links are broken. I have attached a screenshot, and as you can see, Webstorm is also failing to load my resources. What am I doing wrong? The same function works fine when I try it from NetBeans 7.

As you can see from the screenshot, the path for the index file is: file:///C:/Users/Dankoni/Desktop/Dev/Websites/Dankoni.com_Webstorm/index.html

However, if I get the path for one of my images, it comes out as: file:///C:/images/dankoni_ouroboros_default.jpg

I'm sure Webstorm doesn't have that much of an issue with relative paths, right? So, what has my noob ass done wrong? Will I run into this same problem if I remake the project and connect it to my site's ftp? Please help!

Thank you for taking the time to read this =)


Comment actions Permalink

Hi Matthew,

As you can clearly see it's Chrome who is having problems loading the images and not WebStorm (WebStorm just reports back what Chrome tells).

Based on URLs of images that Chrome tries to load (file:///C:/images/dankoni_ouroboros_default.jpg) and URL of the actual home page (file:///C:/Users/Dankoni/Desktop/Dev/Websites/Dankoni.com_Webstorm/index.html) I think that you are using relative-to-the-website-root URLs (e.g. <img src="/images/dankoni_ouroboros_default.jpg"... -- notice the leading "/") rather than relative-to-current-page URLs (e.g. <img src="images/dankoni_ouroboros_default.jpg"... -- notice absence of leading "/").

If my assumption above is correct, then such approach with leading "/" (while it's 100% correct) is not suitable when using file:///C:/... kind of URLs -- as you can see it is not understood correctly as it tried to load files from the root of your C: drive.

If you remove leading "/" then it should work OK (at least that is what I expect based on info you have provided).

If you want to keep using current URLs, then I suggest:

  1. install some local web server and access site via fake URL (fake DNS name can easily be done via hosts file: C:\Windows\System32\drivers\etc\hosts -- you must edit it with Admin rights). Plenty of choices here:
    • standalone Apache
    • XAMP, WAMP and alike -- are ready to go packages bundled with Apache web server; easier to use for new users
    • Windows' own IIS web server: Windows Vista/7/8 has it -- just install it via Control Panel | Programs and Features | Turn Windows features on or off | Internet Information Services
    • any other web server/package of your choice
  2. or use WebStorm's built-in simple HTTP server (v6 only; can serve static files): your project will be accessible via http://localhost:63342/<project name>/<path from the project root> (in your case it will be http://localhost:63342/Dankoni.com_Webstorm/index.html (while WebStorm is running, of course). But I'm still not 100% sure if it will work fine with relative-to-the-website-root URLs, as there is project name in the URL anyway.

Once you have any webserver up and running (and configured accordingly), do not forget to set Deployment entry and mark it as Default for this project (Settings | Deployment -- entry of "In Place" type should be just fine) -- this will allow to to use "Open in Browser" with proper URL instead of file:/// one.

Comment actions Permalink

Thank you for your incredibly detailed answer. I tried changing the img paths and that worked, but since this is just a personal site I'm messing around with, I'm just going to create a new project with direct access to the live server. It seems that has solved most of my issues.

Thanks again!


Please sign in to leave a comment.