how can i tell to chrome to inspect an element in my js function?

Question

Suppose we have a function like this:

function showProps(el){
    inspect(el);
}

what is the solution for this that when we call this function the chrome open the inspecting window and locate the el element?

In the chrome console when used inspect(document.body) it does what we want and opens the inspecting section and select the body element. but when we run in my function, it says the inspect() method is undefined and unknown.

Answer 1

The various commands available in the devtools console are not available to normal scripts running in the page. It's hard to prove a negative, but I don't think there's any API available from normal scripts that would let code open the devtools window and inspect an element.

As a poor workaround, if you have an element that's difficult to select with the mouse etc., you could have your code do console.log(theElement) and then in the console you can right-click the element display and choose "Reveal in Elements panel". But that's not the same thing of course.

If you're willing to use an extension, this question's answers may be useful.