Chrome Debugging Chrome Extension Javascript

Question

I am trying to debug a chrome extension. I have opened up the background page in the extension page but I was wondering if there was a way to look at the array type that I have.

For example, I have the code

function main() {
var cells = document.getElementsByClassName('sectionFieldInstructor');
var length = cells.length;
var professors = [];
var profCount = 0;

Where my cells is the teachers in the list. I would like to view which teachers I have in the cells array.

Also, in the inspected page, the teachers name is listed as

<a href="search?mode=search&instructor=TEACHER">A. TEACHER</a><br/>

Would it be affected by that?

Thanks!

Just set a breakpoint inside the function and hover the mouse on the variable. The debugger is extremely powerful with lots of features that really speed up and help development, read some tutorial like the official one: developers.google.com/web/tools/chrome-devtools/debug/… — woxxom
– woxxom, Commented Sep 7, 2016 at 19:32

BHinkson · Accepted Answer · 2016-09-07 19:30:21Z

1

You can do that with Chrome developer tools. The easiset way is to add

var cells = document.getElementsByClassName('sectionFieldInstructor');    
    console.log(cells); //Add this line     
var length = cells.length;

Then it will be displayed in your console. (There is a tab in dev tools called console.)

You can call that function from the console as well by typing:

main();

Hope this helps

answered Sep 7, 2016 at 19:30

BHinkson

3444 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sicktightyo Over a year ago

I couldnt get the console to open up in dev tools for some reason but I found it when inspecting the page. Thanks!

Collectives™ on Stack Overflow

Chrome Debugging Chrome Extension Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related