Online and Built-in Tools that I use for Web Development

[cpradio]

Continuing the discussion from Rewrite affecting multiple directories. Also need help with a rewrite rule:

@RyanReese

What online tester do you use for this @cpradio ? I used a bunch from Google and they ultimately all suck.

Also, you know how CSS is mainly debugged from inspect element? What’s the JS equivalent? I use the console and put console logs in my code to see what’s happening (alerts too) but I dunno if there is a better way (OT I know).

This was a good enough question, it needed its own spotlight (thanks @RyanReese) .

For CSS
Inspect Element (in any browser)

For JS
I’ll typically use Firebug in Firefox, or Chrome’s Developer Tools and set breakpoints in the JavaScript code I want to “step through”

For Rewrite Rules
I recently found this: http://htaccess.madewithlove.be/
You enter a URL you want your rule to run against, then you type in your rule and press Check Now. The end result you want to see is the Output URL changes to that of your RewriteRule. If you still see your input URL, then your Rule failed.

I also use https://regex101.com/ to test the Regex’s that I build for my Rewrite Rules, so I can test it against multiple URLs that I have on my website to make sure it only matches what it should match.

So those are a few of the tools I use, what tools does everyone else use?

[RyanReese]

Thanks! I didn’t know if there was a sort of “cheat” with JS like there is in CSS with inspect element.

@cpradio

and set breakpoints in the JavaScript code I want to “step through”

Doing this for what purpose? (Keep in mind my only debugging experience is console/alerts. I have really old debugging methods probably lol)

[cpradio]

Okay, so let’s say you have JavaScript that isn’t working right.

You can go into the Dev tools, go to Sources, find your JavaScript file in the left pane, navigate to your method/code that isn’t working and press the line # you want to the browser to stop at when it executes that section of code (it should set a breakpoint).

Then press the button, or whatever fires your code on your webpage. When the browser executes that event, it will stop the execution at the breakpoint you set. At this point, you can work now inside the Developer Tools. You can see the value of variables, you can run additional code in Console, and you can use the Step Next, Step Over, or Play to move to the next executing line, step over the next method call, or release the execution, you no longer want to control it.

[RyanReese]

Ah ok that makes sense actually. Thanks!