3

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).

Improve this question
10
  • 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, 2013 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, 2013 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, 2013 at 13:45
  • Are you referring to live-refreshing of server-side code you change? or just HTML/JS/CSS changes?
    – Kushal
    Jun 20, 2013 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.
    – Kushal
    Jun 20, 2013 at 14:02

2 Answers 2

Reset to default
2

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.

Improve this answer
4
  • 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, 2013 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, 2013 at 15:39
  • Hm, but how to link server and client code? Your explanation does not make it clear.
    – sergzach
    Jun 20, 2013 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, 2013 at 16:20
1

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.

Improve this answer
2
  • 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, 2013 at 13:48
  • Way too heavy-weight...
    – Domi
    Apr 19, 2014 at 11:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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