Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

Is there a methodology to debug websites without a browser?

Normally I use a web browser to view a results page. The slow debugging process confuses me a little. To correct an error I need to switch to a code window (which takes some time). Then I correct the error and return to a browser window, press F5, and wait for the page to update (which could take 10 secs). It could take only 1 second if the page automatically updates after I correct my code.

I'd like a tool where I could see my code and a corresponding result page on one screen. I need a tool that updates an open page upon code changes. I would also like to edit both server and client sides (generally JavaScript), and see my changes as soon as possible, without unnecessary 'user' manipulations.

Update.

I need a tool which controls source files. It must reload a browser when any source file is changed. A good feature can be reloading with cache clear (for example if a changed file has specific extention such as .js, .css).

share|improve this question
    
Nope, but i'd kill for one ;) You can edit html inline with chrome in realtime which is useful for debugging CSS –  Matt D Jun 20 '13 at 13:39
    
Don't most modern website building tools do this (I.E. Dreamweaver?). I'm almost positive that when I used dreamweaver a few years back you would have the code view in one window, and then multiple browsers in another and they would all update in real time. I haven't used it in a while so I can't say for sure. –  Ampt Jun 20 '13 at 13:41
    
@Ampt As I know the Dreamweaver is limited by some technologies, which is PHP, etc. I need a tool that doesn't care about technologies I use - we can use everything we want - Python, Java, something else. –  sergzach Jun 20 '13 at 13:45
    
Are you referring to live-refreshing of server-side code you change? or just HTML/JS/CSS changes? –  Kush Jun 20 '13 at 13:59
1  
If you're on Windows, you can use something like Prepros that'll take care of your front-end code (live reloading everything), but I wonder if anything such for backend code exists. –  Kush Jun 20 '13 at 14:02
show 5 more comments

2 Answers

up vote 2 down vote accepted

Essentially, you want to tighten your feedback loop.

To answer your direct question, there are tons of tools or plugins to automatically refresh the browser when it detects changes in your project. There are both browser-level plugins, as well as editor integrations. For example, when I save a file in vim, I can have it automatically refresh my browser window as well as run any automated tests for that given file - all without taking my hands off the keyboard.

It's concerning that it takes 10 seconds for you to see changes. You should really be doing everything you can to speed up that feedback loop. Your local webserver takes 10 seconds to generate a file? Fix that.

If you split your code up enough, you can adopt TDD - this means:

  • Splitting your code into small enough units that they can be run and tested in isolation
  • Mocking out any dependencies so everything is basically instant
  • Write tests that fail
  • Satisfy tests with minimal code to pass
  • Refactor/clean up your mess as you go

This takes your feedback loop to <1s (without blocking your workflow) whenever you change a file. This is the sort of case that TDD Is meant to help: getting feedback as fast as possible.

Even if you don't adopt testing, there are similar ways to get a tight feedback loop between browser integration, automated scripts and simplified versions of your system-under-test. Your goal is simply to minimize the steps required to ensure your code is working. The longer the delay in feedback, the higher chance of programming by coincidence.

share|improve this answer
    
Thank you. Isolation testing is very good for bug-free code. And your idea has sense. But now I need a tool to see a whole website. It's difficult (can be possible) to test Python (on a server side) + Javascript (on a client side) together and get a result. May be you know a methodology - how is it possible? –  sergzach Jun 20 '13 at 15:14
1  
There are different levels of testing... test them in isolation first while developing. Test further and further up the stack as you know the individual layers work. You can use automated browser testing ( such as PhantomJS ) to test the entire system as a user would. This is obviously much slower, but is good for acceptance testing. –  Adrian Schneider Jun 20 '13 at 15:39
    
Hm, but how to link server and client code? Your explanation does not make it clear. –  sergzach Jun 20 '13 at 16:18
    
The test suite would request pages directly from the server, also acting as a client. You'd script it to click around and assert that various things happen. For example, when I navigate to "/some-page" and I click on "some link", then I should see "x" in the "y" element. –  Adrian Schneider Jun 20 '13 at 16:20
add comment

Have you tried using (eclipse) Springsource Tool Suite with maven and embedded Tomcat? On my web projects I have a "Run configuration" with maven goals of clean tomcat7:run. I edit my JSPs and hit refresh on the browser. Server side java code I have to stop the server and rerun the above - takes seconds, 2-3 mouse clicks.

share|improve this answer
    
Thank you. It's a good idea, but I would like more: no clicks to refresh a browser. I save a file (a keyboard shortcut), a specific browser refreshes a page automatically. To touch mouse - is too long time. –  sergzach Jun 20 '13 at 13:48
    
Way too heavy-weight... –  Domi Apr 19 at 11:01
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.