MacOS – How to find a specific JavaScript identifier of a website

javascriptmacoswebsites

I want to use JavaScript to set the scroll amount of a webpage in an AppleScript, using the second method described in this answer.

This answer focuses on one webpage in particular. I want to branch this method out, so that I can use it on any other webpage. I am unfamiliar with JavaScript.

So, is there some way that I can hover my mouse in a certain location of a webpage, and then I am told what the corresponding JavaScript identifier is? If that's not possible, is there a way to get the JavaScript identifier name of a specific visual element on a webpage?

Best Answer

As an example in Google Chrome, using the URL of this question and setting the scroll to point to the question header of the page, use Chrome > View > Developer > Developer Tools ⌥⌘I to find the id. In this case it's called question-header.

You can also right-click and select Inspect from the context menu, which will bring up Developer Tools directly to that point in the code.

The following code will open this page and scroll to the question header.

set myURL to "http://apple.stackexchange.com/questions/276314/how-can-i-find-a-specific-javascript-identifier-of-a-website#276314"
tell application "Google Chrome"
    activate
    tell front window to set curTab to make new tab at after (get active tab) with properties {URL:myURL}
    tell curTab
        repeat while (loading)
            delay 1
        end repeat
        -- scroll to the top of the question header.
        execute javascript "e=document.getElementById('question-header');tTop=0; do {tTop +=e.offsetTop || 0; e=e.offsetParent} while(e); window.scrollTo(0,tTop);"
    end tell
end tell

You can see in the code above that question-header was swapped for twc-scrollabe in the execute javascript ... line of code.

Developer Tools

You can also get a quick list of the <div id= anchor points using curl in Terminal and piping the output to grep, as in the example for this page.

$ curl -s 'http://apple.stackexchange.com/questions/276314/how-can-i-find-a-specific-javascript-identifier-of-a-website' | grep '<div id='
    <div id="notify-container"></div>
    <div id="custom-header"></div>
            <div id="header">
                <div id="hlogo">
                <div id="hmenus">
        <div id="content">
<div id="herobox">
    <div id="hero-content">
            <div id="close"><a title="click to minimize">_</a></div>
        <div id="blurb">
        <div id="desc">
</script>           <div id="question-header">
            <div id="mainbar">
        <div id="comments-276314" class="comments  dno">
        <div id="comments-link-276314" data-rep=50 data-anon=true>
            <div id="answers">
                <div id="answers-header">
                            <div id="tabs">
<div id="answer-276316" class="answer" data-answerid="276316"  itemscope itemtype="http://schema.org/Answer">
        <div id="comments-276316" class="comments  dno">
        <div id="comments-link-276316" data-rep=50 data-anon=true>
<div id="post-editor" class="post-editor js-post-editor">
            <div id="wmd-button-bar" class="wmd-button-bar"></div>
    <div id="draft-saved" class="draft-saved community-option fl" style="margin-top: 8px; height:24px; display:none;">draft saved</div>
    <div id="draft-discarded" class="draft-discarded community-option fl" style="margin-top: 8px; height:24px; display:none;">draft discarded</div>
    <div id="wmd-preview" class="wmd-preview"></div>
                <div id="sidebar" class="show-votes">
<div id="hot-network-questions" class="module tex2jax_ignore">
<div id="feed-link">
    <div id="feed-link-text">
    <div id="footer" class="categories">
            <div id="footer-menu">
                <div id="footer-sites">
            <div id="copyright">
            <div id="svnrev">
                <div id="additional-notices">
        <div id="noscript-warning">Ask Different works best with JavaScript enabled<img src="https://pixel.quantserve.com/pixel/p-c1rF4kxgLUzNc.gif" alt="" class="dno"></div>
$

Note: While curl will bring the page down, the grep command as shown in the example may not work as nice as it did for this page. Some page content doesn't have line breaks and the code is a contiguous stream.

Related Question