0

My knowledge of JavaScript is very basic, and I'm somewhat familiar with the Chrome console. I am posting here as being uncertain about the correct terms to use, but hope to keep this question short and focused.

I have a browser page that uses JavaScript as certain elements change values. I know basically which .js file is responsible for this, but I would like to:

a) know which function is initially called when an element changes - i.e. be TOLD by the Chrome console.

b) put a "stop" in that function at a certain point, or add a line of code, or determine the value(s) of a local execution context

Are (a) and (b) possible? Using the Chrome console alone? adding console.log('status here is '+this.status) all over is very time-consuming.

Oliver Williams
  • 5,966
  • 7
  • 36
  • 78
  • open the script tab in the debugger and click to the left of the lines you want to inpsect. this will put break points at those locations. you can then review the call stack to the right. – Zach M. Aug 01 '17 at 18:49
  • Have you tinkered at all with the `F12` developer tools? You can put breakpoints in source there. You can also inspect the DOM and add DOM breakpoints on certain events. – zero298 Aug 01 '17 at 18:49
  • 1
    https://developer.chrome.com/devtools – epascarello Aug 01 '17 at 18:49
  • Possible duplicate of [Javascript Debugging line by line using Google Chrome](https://stackoverflow.com/questions/10638059/javascript-debugging-line-by-line-using-google-chrome) – Heretic Monkey Jun 09 '18 at 23:23

1 Answers1

0

Determine the context values (b)

To know the values of the local execution context, you can attach a hanlder function to the change event in your html element and log the value to the console output (console.log(myValue)). For input elements, for exmaple, a simple way to do it is adding the onchange attribute to the html element passing the handler function.

You can also add a breakpoint in the handler function using the F12 Developer Tools. Read more about it here: Google Chrome - Pause Your Code With Breakpoints

Example:

// This function will be called when you change the value and move the focus 
// to a different element or when you click enter
function myHandler(input){
  console.log(input.value);
}
<input value="123" onchange="myHandler(this);" />

You could also use onkeydown. For more events you can check: W3Schools - Dom Object Events

Event order (a)

Regarding the event order (a), you can reference to ths other question:

What is the event precedence in JavaScript?

bcngr
  • 745
  • 6
  • 13