Page 1 of 3

Internet Explorer Element Spy (alternative to iWB2 Learner)

Posted: 14 Jan 2016, 17:07
by Bruttosozialprodukt
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

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

Posted: 14 Jan 2016, 17:12
by Joe Glines
I'm looking forward to playing with this!

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

Posted: 14 Jan 2016, 17:29
by Blackholyman
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?

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

Posted: 14 Jan 2016, 17:35
by Bruttosozialprodukt
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.

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

Posted: 14 Jan 2016, 21:16
by Soft
I wanted to rewrite iwb2 but I wasn't good enough to :(
glad to see this!

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

Posted: 15 Jan 2016, 07:14
by Bruttosozialprodukt
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.

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

Posted: 15 Jan 2016, 07:18
by Joe Glines
When I navigate to a new page, it isn't working (if I use the back button it works on the original page)

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

Posted: 15 Jan 2016, 07:27
by Bruttosozialprodukt
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.

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

Posted: 15 Jan 2016, 07:31
by Joe Glines
It looks like it might have something to do with Amazon.com. I'm running Windows 7 and IE 11

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

Posted: 15 Jan 2016, 07:37
by Bruttosozialprodukt
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.

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

Posted: 15 Jan 2016, 07:45
by Joe Glines
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!

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

Posted: 15 Jan 2016, 07:51
by Bruttosozialprodukt
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

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

Posted: 15 Jan 2016, 07:55
by Joe Glines
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.

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

Posted: 15 Jan 2016, 08:04
by Bruttosozialprodukt
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

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

Posted: 15 Jan 2016, 08:07
by Joe Glines
That would be pretty cool although for Noobs (and me too) I'd probably frequently forget to add the handle at the beginning. :(

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

Posted: 15 Jan 2016, 08:14
by Bruttosozialprodukt
Good point, I'll add a field in the GUI in which you can specify that.

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

Posted: 15 Jan 2016, 08:17
by Joe Glines
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.

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

Posted: 15 Jan 2016, 08:21
by Bruttosozialprodukt
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.

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

Posted: 15 Jan 2016, 08:25
by Joe Glines
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

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

Posted: 15 Jan 2016, 09:46
by Bruttosozialprodukt
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