Debugging - Step out, Step Into, Step over?

JavaScript
1

Hi All

I;m a novice web developer and I’m studying web development online. Unfortunately I’m getting little help from my tutor. I’ve been asked to utilise debugging tools on my code. However nothing seems to run. The Step Into, Step Over and Step Out are not highlighted when I try to check my code. I’ve tried using debugging through Microsoft edge and Internet Explorer but with no results. Please can you help? I’ve attached a screenshot.

Best wishes

Dan

Screenshot%20(1)
Screenshot%20(1)1366×768 80.3 KB

2

Hi there

An image of your code isn’t very helpful as people can’t copy and paste it to try it for themselves. Can you copy it into a post?

When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.

3

Like this: (Rewritten only, not solved. Ready for JS person to take the reins smile .)

<!doctype html>
<html lang="en">   <!-- language attribute is strongly recommended -->
<head>    <!-- head section and title are required -->
    <title>replace word (JS)</title>
</head>
<body>

<p>Replace "car" with "porsche"</p>

<button onclick="functionReplace()">Click here</button>

<p id="dan1">My car is the best</p>

<script>
function functionReplace() {
    var inputText = document.getElementById("dan1").innerHTML;
    var output = inputText.replace(/car/i,"porsche");
    document.getElementById("dan1").innerHTML = output;
}
</script>

</body>
</html>

Oops, EDIT: changed getElementByID to getElementById in my “copy”. (Thanks, gandalf458)

4

getElementByID should have a lowercase d.

If you use the developer tools in your browser and look at the console, you will find it reports errors there.

5

You want to use the debugging tools, to what end?
What is the problem that you are wanting to solve?

6

The problem he’s reporting is that the debugging tools aren’t actually firing the breakpoints.

It’s odd, because you seem to be showing us an Edge debugger while the IE icon in your desktop tray is highlighted.

The breakpoints work as shown for me. I can only surmise that either you’ve managed to turn off javascript in your browser, or… actually that’s all i’ve got. It’s 6 AM on a Sunday.

7

I suspect that he doesn’t know that the code needs to execute to trigger the breakpoints and the step commands.

Refresh the web page and further progress can then be gained.

8

After changing the “D” to “d” on Id, the HTML and JS in post #3 works for me. Sorry 'bout that error, guys.

9

Have you tried something like Google Chrome? I just did a quick test in there, and the breakpoints fire as expected for me. You can then step through and see the various values of variables and see what steps the execution takes. While I do normally use IE myself, I couldn’t get it to run the code as I have some weird defaults that stop it.

I must admit I was expecting it to fail on this line

var output = inputText.replace(/car/i,"porsche");

as I felt something was missing, but it turns out that’s OK.

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.