Internet Explorer Element Spy (alternative to iWB2 Learner)

Post your working scripts, libraries and tools
Bruttosozialprodukt
Posts: 447
Joined: 24 Jan 2014, 22:28

Internet Explorer Element Spy (alternative to iWB2 Learner)

14 Jan 2016, 17:07

So in my opinion the iWB2 Learner script didn't show enough information. So I thought to myself, why not improving it a bit. But I looked at the code and decided to completely rewrite the whole thing because I think it can be done with less than half the lines of code. At the moment I'm at 99 lines of code while the iWB2 leaner is a bit over 600 and the basics are already working.

Well the main reason for writing this script is that there are a lot of scripts that are blindly depending on the index of some element, which is really bad practice because as soon as the website changes a tiny little bit, the script breaks.
So let's say you have this element <div class="redBackground">test</div> and the class "redBackground" is used in 70 other elements.
Now you could use document.getElementsByClassName("redBackground")[71] which could easily breakwhen website gets another element using that class. Or you could look for nearby parents that have an id. Imagine there is another div around that first one:

Code: [Select all] [Download] GeSHi © Codebox Plus

<div id="testContainer">
<div class="redBackground">test</div>
</div>

Now you could easily go like this:
document.getElementById("testContainer").getElementsByClassName("redBackground")[0]
and the chance of this breaking is way lower.

So my plan is it to display suggestions like the code above to access an element.
In addition to that I want to display more properties and allow easier selection of elements (imagine you want to select an element that lies below a transparent overlay, I want to make that possible).

This is my code so far:
16 Jan 2016 - 1

Code: [Select all] [Expand] [Download] (IE_Window_Element_Spy.ahk)GeSHi © Codebox Plus



It's more a proof of concept than anything else for now.

This is what it looks like atm:
Image

my test environment is Windows 8.1 with Internet Explorer 11.0.9600.18161
...
Tell me what you think, if you would use it, if you have any suggestions for improving this etc. :)


Older versions:
Spoiler
Last edited by Bruttosozialprodukt on 15 Jan 2016, 18:43, edited 6 times in total.
User avatar
Blackholyman
Posts: 1149
Joined: 29 Sep 2013, 22:57
Facebook: socialjsz
Google: +Jszapp
Location: Denmark
Contact:

Re: Internet Explorer Element Spy (alternative to iWB2 Learner)

14 Jan 2016, 17:29

Glad to see a rewrite of this :)

Do remember that getElementsByClassName was not usable in IE when the old version was written

One thing i have had good use for is the old title bar info about the index in the element tag array

The suggestions part sound like the old iWeb lib did you see that?
Bruttosozialprodukt
Posts: 447
Joined: 24 Jan 2014, 22:28

Re: Internet Explorer Element Spy (alternative to iWB2 Learner)

14 Jan 2016, 17:35

Oh that's good to know, thanks.

No haven't seen the library yet. Could you elaborate on that?
Does it simply generate codes like this document.getElementById("testContainer").getElementsByClassName("redBackground")[0]?

edit:
Okay never mind, I found it. Interesting library for sure. Makes me thinking that macrorecorder for IE would be cool.
User avatar
Soft
Posts: 174
Joined: 07 Jan 2015, 13:18
GitHub: visionary1
Location: Seoul
Contact:

Re: Internet Explorer Element Spy (alternative to iWB2 Learner)

14 Jan 2016, 21:16

I wanted to rewrite iwb2 but I wasn't good enough to :(
glad to see this!
AutoHotkey & AutoHotkey_H v1.1.22.07
Bruttosozialprodukt
Posts: 447
Joined: 24 Jan 2014, 22:28

Re: Internet Explorer Element Spy (alternative to iWB2 Learner)

15 Jan 2016, 07:14

Little update. Improved performance and made sure that the last selected website gets cleaned up when the script exits or a different tab is activated etc.
Bruttosozialprodukt
Posts: 447
Joined: 24 Jan 2014, 22:28

Re: Internet Explorer Element Spy (alternative to iWB2 Learner)

15 Jan 2016, 07:27

Try to reload the site, maybe there is still some code in there that the older version injected.
If that doesn't work, it would be nice to know on which sites you can reproduce this issue.
Also, which Windows and IE version are you using?

It's working fine for me btw. For example when I go to google and click a result or just type a different url in the navigation bar. It was working every time I tried it.
Bruttosozialprodukt
Posts: 447
Joined: 24 Jan 2014, 22:28

Re: Internet Explorer Element Spy (alternative to iWB2 Learner)

15 Jan 2016, 07:37

I think I found the issue. It kind of breaks when you scroll down. At least that's what happens to me.
edit: Fixed it, try the new version.

The script should now work fine even if you scroll and zoom on the site etc.
User avatar
Joe Glines
Posts: 384
Joined: 30 Sep 2013, 20:49
Facebook: https://www.facebook.com/theAutomatorGuru/
Google: https://plus.google.com/105328929654286634910
GitHub: joetazz
Location: Dallas
Contact:

Re: Internet Explorer Element Spy (alternative to iWB2 Learner)

15 Jan 2016, 07:45

For me it acts querky on different Amazon pages (without scrolling down).

Anyway, I'm digging the tool! Thank you for your work and simplicity in design. Unless you do it later, I'm going to add hotkeys to copy the various items (classNames, ID, Name, TagName etc) to the clipboard which will make it a breeze to use as I'd prefer not to freeze it.

Thanks again!
Bruttosozialprodukt
Posts: 447
Joined: 24 Jan 2014, 22:28

Re: Internet Explorer Element Spy (alternative to iWB2 Learner)

15 Jan 2016, 07:51

I might add that, not sure yet.
This would do the job I guess:

Code: [Select all] [Download] (Untitled.ahk)GeSHi © Codebox Plus

F2::
GuiControlGet, GUI_InfoBox
Clipboard := GUI_InfoBox
Return
User avatar
Joe Glines
Posts: 384
Joined: 30 Sep 2013, 20:49
Facebook: https://www.facebook.com/theAutomatorGuru/
Google: https://plus.google.com/105328929654286634910
GitHub: joetazz
Location: Dallas
Contact:

Re: Internet Explorer Element Spy (alternative to iWB2 Learner)

15 Jan 2016, 07:55

I meant specific ones like:
^+c to copy Classname
^+i to copy ID
^+n to copy Name
^+t to copy TagName

This would dump exactly what I want to the clipboard which I could then paste directly into the code I'd be writing.
Bruttosozialprodukt
Posts: 447
Joined: 24 Jan 2014, 22:28

Re: Internet Explorer Element Spy (alternative to iWB2 Learner)

15 Jan 2016, 08:04

I see, well I think I'll make hotkeys to copy the code that I'm planning to generate into the clipboard, so that you directly get things like this
document.getElementById("testContainer").getElementsByClassName("redBackground")[0] in your clipboard
Bruttosozialprodukt
Posts: 447
Joined: 24 Jan 2014, 22:28

Re: Internet Explorer Element Spy (alternative to iWB2 Learner)

15 Jan 2016, 08:14

Good point, I'll add a field in the GUI in which you can specify that.
User avatar
Joe Glines
Posts: 384
Joined: 30 Sep 2013, 20:49
Facebook: https://www.facebook.com/theAutomatorGuru/
Google: https://plus.google.com/105328929654286634910
GitHub: joetazz
Location: Dallas
Contact:

Re: Internet Explorer Element Spy (alternative to iWB2 Learner)

15 Jan 2016, 08:17

Damn! Now this is getting pretty cool! LOL :bravo:

BTW- have you tried your script on a page with frames? I always hated dealing with those and the IWB2 was very confusing to me on how to deal with them.
Bruttosozialprodukt
Posts: 447
Joined: 24 Jan 2014, 22:28

Re: Internet Explorer Element Spy (alternative to iWB2 Learner)

15 Jan 2016, 08:21

Yes, in fact I noticed that my script can't access them yet. I'll have to think about a good way to handle them.
User avatar
Joe Glines
Posts: 384
Joined: 30 Sep 2013, 20:49
Facebook: https://www.facebook.com/theAutomatorGuru/
Google: https://plus.google.com/105328929654286634910
GitHub: joetazz
Location: Dallas
Contact:

Re: Internet Explorer Element Spy (alternative to iWB2 Learner)

15 Jan 2016, 08:25

In the past couple of years I haven't found nearly as many sites using frames. Having said that, I always felt like crying a little when I would try and scrape something from a site that had them. LOL
Bruttosozialprodukt
Posts: 447
Joined: 24 Jan 2014, 22:28

Re: Internet Explorer Element Spy (alternative to iWB2 Learner)

15 Jan 2016, 09:46

Another little update.
The GUI now shows a code suggestion on how to access an element. (Not sure how reliable that is atm.)
It's far from what I want to see in the end, but it's a start.

I also added some properties to the GUI that may contain text that you want to extract from an element:
.value
.innerText
.textContent
.innerHTML

Return to “Scripts and Functions”

Who is online

Users browsing this forum: arcticir and 18 guests