Visual Event 2 doesn't work with local files opened with file:/// protocole while Visual Event 1 work well with file:// protocole.

Uses $.browser

Steps to reproduce:

1. get a website with a textfield and start VE2 on it
2. deactivate VE2
3. enter for example 'h' in the textfield
4. the VE2 help starts

Corresponding actions happens for 'r' and 'space' as well.

Would be good is the Dojo library events were also available.

While this is great for supported frameworks, it doesn't work for knockoutJS.

Both the bookmarklet and the script itself explicitly uses HTTP requests which is unnecessary.

From

    var protocol = window.location.protocol === 'file:' ?
        'http:' : '';
    var url = protocol+'//www.sprymedia.co.uk/VisualEvent/VisualEvent_Loader.js';
    //var url = protocol+'//localhost/VisualEvent/builds/VisualEvent_Loader.js';

This is unnecessary as using

<script src='//www.sprymedia.co.uk/VisualEvent/VisualEvent_Loader.js'/>

automatically requests the page using the current protocol -- file, http or https. The sprymedia site has HTTPS available, so this won't be a problem either.

Similar segment appears in the actual code around

Steps to reproduce:

1. load VE2 on a site
2. unload VE2 on this site
3. load VE2 again
4. any lightbox will show the javascript code without the SytanxHighlighter and there is no scrollbar for long lines of code

The link is point to an inexistent github place, please update it!

VisualEvent generates some dynamic links which open in current tab/window. Not very smart :-)

All your links (including to your website) should have a target="_blank" attribute.

I'm not entirely sure how this occurs, but in the setup at my work's website using jQuery 2, a fatal JS error is thrown, meaning the overlays don't show at all. This is the offending code:

if ( elements[ elements.length-1 ].listeners.length === 0 ) {
        elements.splice( elements.length-1, 1 );
}

To fix it, we just need to change it to the following:

if ( typeof elements[ elements.length-1 ] != 'undefined' && elements[ elements.length-1 ].listeners.length === 0 ) {
            elements.splice( elements.length-1, 1 );
}

I absolutely love visual event!

Consider the following.

<sometag .... >
   --shadowRoot--
         <style>...</style>
        <a id="test"></a>
        <script>
              $('a').on('click', function(event){  ....  })
       </script>
</sometag>

The problem is, these event's are not picked up from the VisualEvent:

Here is a way to find elements inside a shadowRoot element.

var all = document.querySelectorAll("*");
var length =  all.length
for(i= 0; i < length; i++){
  if(all[i],shadowRoot) all.concat(all[i].shadowRoot.querySelectorAll("*"));
}

Of course this is a quick and dirty way of archiving this, but may need a bit more thought and work on to it.

Let me know your thoughts.

Hi!

This tool is really awesome, but we'd like to use it on a site without access to the internet, while running on the server (aka no using the file or http protocol to fetch js and css). I managed to cobble something together by using the .sh-script in this repo and hardocing a path to the js and css, but if a standalone tarball or something could be provided, that'd be awesome.

On the old VE page the different colour codes are explained (blue = mouse event and so on).
It would be nice to have the explanation added to the help page for a quick lookup and to the Readme.markdown for new users who see VE2 for the first time. Thanks. :)

It would be nice to have the ability to fetch events registered at the DOM level with attachEvent/addEventListener.

I get this error on the console when running Visual Event 2. Can you provide a fully inline Javascript that doesn't load anything from such domain? Thanks.

Here's my scenario...

I'm trying to track down and if needs be fire the event manually.

Visual Event says there's a "change" event on select#Size.single-option-selector. If I click trigger event it works as expected.

If I try and do

$('select#Size.single-option-selector').change(); or $('select#Size.single-option-selector').trigger('change');

it does nothing, so I need to figure out exactly what that "trigger event" is doing so I can manually do the same thing

Hi

I don't know how it does, but if you use firebug and do a

console.log(function_name); 

you can see a clickable function definition (there isn't the body). If you click you go directly on the script tab at the exact file/row.

It would be assome if - when you use VE in conjunction with firebug - can do the same thing

It would be a killer feature to find what bind a function to an event.

Let's say I have this code

// somewhere.js
function on_click() {
// do something
}

// somewhereelse.js
function bind_events() {
$('a').click(on_click);
}

sometimes what I really want is bind_events, not on_click

VisualEvent every time shows events for at least two invisible items which are created by VisualEvent itself: div#Event_Lightbox and div.Event_NodeRemove.

This is a feature request.

While debugging events it is so cool the stuff which VisualEvent does in the current version, however to make it even more cool this could be added:

Tracking of the binding process, that is: I could see in VisualEvent which code (where with link) did the binding of the event. "Who is watching?" - so that can backtrack events to the part of the code which has added the event. An example could be:

function clickHandler() {
  // I'm the handler
}

$(function() {
  // Im am binding the handler to elements
 $('li').on('click', clickHandler);
});```

I do not know if that is possible, but hey it would be a great feature! :-)

/Sten

So, I have a dropdown that is activated by a click event via jquery. The dropdown, when it is expanded has a couple of items that I want to show the events for and currently it doesn't seem possible. Would it be possible to allow the click event to happen and then show the events for the nested DOM objects?

I'm currently working off of the master branch.

Visual Event doesn't work on https sites. Probably caused by "http" being hard coded.

Isn't it better to get the script directly from github?

Now the script load the data from http://www.sprymedia.co.uk/VisualEvent/VisualEvent_Loader.js

And it could use:
https://raw2.github.com/DataTables/VisualEvent/master/js/VisualEvent_Loader.js

This way we have sure that we use always the last version.

Looks like:

$(document).on('click', '#Button_Email', function(event) { });

Isn't picked up by Visual Event. Assuming its because its attached as a delegate to the document.

Hi
Is it possible to generate a report of all events along with the rest of the data to an html table or maybe a csv?

It would come quite handy to quickly analyze the page.

Is it possible to get the information needed for Visual Event from Angular, and if so, lets use it!

Your website sprymedia is down.

Steps to reproduce:

1. mouseover over an event
2. fire the trigger of this event
3. move the mouse somwhere different, so the lightbox of the event disappears
4. move the mouse back in the area where the lightbox disappeared and no other event is visible
5. in the top left corner a lightbox appears showing only "Node: div#Event_Lightbox"

jQuery delegated events are shown a little confusingly in Visual Event at the moment.

What happens is that it shows the parent event (i.e. the one that jQuery actually attaches to the DOM) and the elements that would trigger the event handler - so, for example if you have a UL with 5 LI tags in it, and attach a delegate event handler to the LIs with the UI as the host, you would see six events in Visual Event.

While this is sort of correct, Visual Event could do a better job of explaining what is going on (currently it shows 'live' text - this should be updated for newer jQuery). It would also be good to update the counters in the bar at the bottom of the window so say how many actual event handlers there are and how many delegated events handlers on child elements - ideally with a way to enable and disable each view so you can filter the view yourself to what you want.

Other libraries probably also have something similar, but lets start with jQuery...

The bookmarklet builder tries to make a call to localhost, which fails. There is a commented URL for www.sprymedia.co.uk, but using that also fails.

VisualEvent uses jQuery, but calls jQuery.noConflict() only on VisualEvent.close(). This causes conflicts with running Prototype-based scripts while VisualEvent is loaded and active.

I don't know why, but it is not working anymore with jquery events, can someone check it please?

jQuery parser in jQueryGeneric() has for ... in loop on array of event handlers. When oEvents is Array (at least in jQuery 1.6.4) and some custom methods are added to Array.prototype (e.g. shuffle etc.), they all are enumerated in this loop and added as handlers for this particular event:

                for ( j in oEvents ) {
                    var aNodes = [];
                    ...
                        aNodes.push( eventAttachedNode ); // aNodes.push("keydown");
                        ...
                        if ( typeof oEvents[j].origHandler != 'undefined' ) { // typeof oEvents.shuffle.origHandler === 'undefined'
                            func = oEvents[j].origHandler.toString();
                        }
                        else if ( typeof oEvents[j].handler != 'undefined' ) { // typeof oEvents.shuffle.handler === 'undefined'
                            func = oEvents[j].handler.toString();
                        }
                        else {
                            func = oEvents[j].toString(); // func = Array.prototype.shuffle.toString();
                        }
                        ...

If oEvents is Array in all jQuery versions then better will be usual for loop.

I have the following 'indexOf' polyfill defined in one of my javascript files (because IE 7 doesn't support it natively):

if (!Array.indexOf) {
Array.prototype.indexOf = function (obj, start) { //implementation not relevant }
}

Only in Chrome (I'm using the latest version), when I use Visual Event (either versions), the 'indexOf' method is shown as a 'click' event on all anchor tags (in Firefox it's working fine). I'm using jQuery 1.6.4.

This is the description of the event shown by Visual Event:

click event subscribed by jQuery 1.6.4 (trigger event)
Function defined on line 55 in overrides.js

Hope this helps.

Thanks for this tool, it helps me a lot in optimizing my website!

Just as the title says

I'll try to review the build process to use grunt.js to do the job!

does it support polymer 2?

Hi,
You done a great job on visual event. i have no problem using it in normal browsers, but it seems to have problem with headless browsers like phantomjs. after injecting VisualEvent_Loader.js nothing happens.

P.S: sorry for my bad English

I get the error: Uncaught SyntaxError: Unexpected token % whenever I run the bookmarklet in Chrome 14.0.825.0 dev

Hey, maintainer(s) of DataTables/VisualEvent!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library DataTables/VisualEvent is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "DataTables/VisualEvent",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

if it has support of the scroll event support will be better

I find it impossible to hold the visual event window in one place.

Do you think you can change the event instead of hover, to be onclick, or maybe add a shortcut to hold the window open until user closes it???

I keep trying to chase the window with my mouse it's really frustrating :(

As per below screenshot:

The four "mousedown" events listed there all contain the exact same text. Additionally, each of the events contains four instances of "line 12 in inline script".

Expected: a single "mousedown" event with a single "function could originate" line.

The Visual Event bookmarklet isn't working.

Please fix it ;)

In the below image, Visual Event creates a link to "inline script" which takes me to "/Inline script", which obviously doesn't exist. I'd expect it to either link to the line in the page where the script is declared, or not be a link at all.

Events attached to window and document are not shown by VisualEvent because window and document are not visible (pseudo-selector ":visible" returns false). Is some workaround possible?

Hover dialog mostly not showing when element is at the bottom of browser window. Only the top part is showing and therefore I can't see the function.

Is there a way to move the dialog window or capture the dialog's text?

Current Prototype events parser is working only for versions 1.6.X. In Prototype 1.7 event registry was changed, so I wrote new parser:

(function(window, document, $, VisualEvent) {

  function dumpListeners(event) {
    var listeners = [];

    for (var eventType in event) {
      var handlers = event[eventType];

      for (var i = 0, len = handlers.length; i < len; i++) {
        listeners.push({
          "type": eventType,
          "func": handlers[i].handler.toString(),
          "removed": false,
          "source": 'Prototype 1.7+'
        });
      }
    }

    return listeners;
  }

  VisualEvent.parsers.push(function() {
    if (typeof Prototype == 'undefined') {
      return [];
    }

    var elements = [], event;

    for (var e in Event.cache) {
      event = Event.cache[e];
      elements.push({
        "node": event.element,
        "listeners": dumpListeners(event)
      });
    }

    return elements;
  });

})(window, document, jQuery, VisualEvent);

I think zepto.js support would be easy as it mimics a lot from jquery http://zeptojs.com/

example "http://dev.sencha.com/deploy/ext-4.0.0/examples/desktop/desktop.html"

Just thought you should know.

thank you for building it it works great of other sites.