datatables / visualevent Goto Github PK
View Code? Open in Web Editor NEWVisually show Javascript events on a page
Home Page: http://sprymedia.co.uk
Visually show Javascript events on a page
Home Page: http://sprymedia.co.uk
Would be good is the Dojo library events were also available.
While this is great for supported frameworks, it doesn't work for knockoutJS.
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.
I get the error: Uncaught SyntaxError: Unexpected token %
whenever I run the bookmarklet in Chrome 14.0.825.0 dev
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.
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.
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.
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!
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.
Both the bookmarklet and the script itself explicitly uses HTTP requests which is unnecessary.
From
Lines 68 to 71 in 1efae22
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
VisualEvent/js/VisualEvent_Loader.js
Lines 83 to 84 in 1efae22
VisualEvent every time shows events for at least two invisible items which are created by VisualEvent itself: div#Event_Lightbox
and div.Event_NodeRemove
.
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...
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
Steps to reproduce:
I'll try to review the build process to use grunt.js to do the job!
Visual Event doesn't work on https sites. Probably caused by "http" being hard coded.
Just as the title says
The Visual Event bookmarklet isn't working.
Please fix it ;)
Visual Event 2 doesn't work with local files opened with file:/// protocole while Visual Event 1 work well with file:// protocole.
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.
Uses $.browser
The link is point to an inexistent github place, please update it!
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!
I think zepto.js support would be easy as it mimics a lot from jquery http://zeptojs.com/
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.
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.
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?
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 :(
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
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!
It would be nice to have the ability to fetch events registered at the DOM level with attachEvent/addEventListener.
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.
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);
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.
Is it possible to get the information needed for Visual Event from Angular, and if so, lets use it!
I don't know why, but it is not working anymore with jquery events, can someone check it please?
Steps to reproduce:
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. :)
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.
does it support polymer 2?
Steps to reproduce:
Corresponding actions happens for 'r' and 'space' as well.
Your website sprymedia is down.
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
if it has support of the scroll event support will be better
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.