Is there a methodology to debug websites without a browser? Normally I use a web

Question

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

Explanation / Answer

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.

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.