{"id":149,"date":"2013-05-28T12:16:12","date_gmt":"2013-05-28T10:16:12","guid":{"rendered":"http:\/\/www.makes-it-work.de\/?p=149"},"modified":"2014-09-25T10:43:43","modified_gmt":"2014-09-25T08:43:43","slug":"javascript-event-debugging-visual-event-2","status":"publish","type":"post","link":"https:\/\/www.makes-it-work.de\/en\/2013\/05\/28\/javascript-event-debugging-visual-event-2\/","title":{"rendered":"JavaScript Event Debugging mit Visual Event 2"},"content":{"rendered":"

Das Debugging von Events, die dynamisch mit JavaScript oder jQuery generiert wurden, kann gerade auf gr\u00f6\u00dferen Webseiten (z.B. Shop-Systeme) kompliziert werden. Ein netter L\u00f6sungsansatz ist ein Bookmarklet von Allan Jardine, das die Events als Overlay \u00fcber die DOM-Elementen anzeigt. <\/p>\n

\"Visual<\/a>

Visual Event 2 im Einsatz<\/p><\/div>\n

Auf diese Weise l\u00e4sst sich leicht nachvollziehen, ob Events wie gew\u00fcnscht gesetzt wurden und umgekehrt woher gesetzte Events kommen. Das kleine St\u00fcckchen JavaScript zeigt in vielen F\u00e4llen n\u00e4mlich sogar die Quelltextstelle (inklusive Vorschau!) an, die f\u00fcr den Event ma\u00dfgeblich ist. Alles in allem ein feines Tool zum JavaScript Event Debugging.<\/p>\n

Die Installation beschr\u00e4nkt sich darauf, den etwas unscheinbaren Link “Visual Event<\/strong>” auf der Seite http:\/\/www.sprymedia.co.uk\/article\/Visual+Event+2<\/a> in die eigenen Lesezeichen zu ziehen. In Zukunft gen\u00fcgt dann ein Klick auf den neuen Favoriten, um die aktuell ge\u00f6ffnete Seite direkt im Browser zu untersuchen.<\/p>\n","protected":false},"excerpt":{"rendered":"

Das Debugging von Events, die dynamisch mit JavaScript oder jQuery generiert wurden, kann gerade auf gr\u00f6\u00dferen Webseiten (z.B. Shop-Systeme) kompliziert werden. Ein netter L\u00f6sungsansatz ist ein Bookmarklet von Allan Jardine, das die Events als Overlay \u00fcber die DOM-Elementen anzeigt.<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_ti_tpc_template_sync":false,"_ti_tpc_template_id":"","_links_to":"","_links_to_target":""},"categories":[95,94],"tags":[81,76,112,82],"translation":{"provider":"WPGlobus","version":"2.12.0","language":"en","enabled_languages":["de","en"],"languages":{"de":{"title":true,"content":true,"excerpt":false},"en":{"title":false,"content":false,"excerpt":false}}},"jetpack_featured_media_url":"","yoast_head":"\nJavaScript Event Debugging mit Visual Event 2 - Makes IT work - der Blog von OMG.de<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.makes-it-work.de\/2013\/05\/28\/javascript-event-debugging-visual-event-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Event Debugging mit Visual Event 2 - Makes IT work - der Blog von OMG.de\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.makes-it-work.de\/2013\/05\/28\/javascript-event-debugging-visual-event-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Makes IT work - der Blog von OMG.de\" \/>\n<meta property=\"article:published_time\" content=\"2013-05-28T10:16:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-09-25T08:43:43+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.makes-it-work.de\/wp-content\/uploads\/2013\/05\/visual-event-2.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@omgde\" \/>\n<meta name=\"twitter:site\" content=\"@omgde\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#organization\",\"name\":\"OMG.de\",\"url\":\"https:\/\/www.makes-it-work.de\/en\/\",\"sameAs\":[\"https:\/\/twitter.com\/omgde\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.makes-it-work.de\/wp-content\/uploads\/2021\/11\/Logo_OMG_PNG-Kopie.png\",\"width\":358,\"height\":356,\"caption\":\"OMG.de\"},\"image\":{\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#website\",\"url\":\"https:\/\/www.makes-it-work.de\/en\/\",\"name\":\"Makes IT work - der Blog von OMG.de\",\"description\":\"Themen und News rundum IT und Technik. Von den Spezialisten der OMG.de GmbH.\",\"publisher\":{\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.makes-it-work.de\/en\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.makes-it-work.de\/2013\/05\/28\/javascript-event-debugging-visual-event-2\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/www.makes-it-work.de\/wp-content\/uploads\/2013\/05\/visual-event-2.png\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.makes-it-work.de\/2013\/05\/28\/javascript-event-debugging-visual-event-2\/#webpage\",\"url\":\"https:\/\/www.makes-it-work.de\/2013\/05\/28\/javascript-event-debugging-visual-event-2\/\",\"name\":\"JavaScript Event Debugging mit Visual Event 2 - Makes IT work - der Blog von OMG.de\",\"isPartOf\":{\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.makes-it-work.de\/2013\/05\/28\/javascript-event-debugging-visual-event-2\/#primaryimage\"},\"datePublished\":\"2013-05-28T10:16:12+00:00\",\"dateModified\":\"2014-09-25T08:43:43+00:00\",\"description\":\"F\\u00fcr das Debugging von Events in Webseiten mit JavaScript gibt es ein feines Bookmarklet von Allan Jardine, womit sich die Events als Overlay anzeigen lassen.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.makes-it-work.de\/2013\/05\/28\/javascript-event-debugging-visual-event-2\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.makes-it-work.de\/2013\/05\/28\/javascript-event-debugging-visual-event-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.makes-it-work.de\/2013\/05\/28\/javascript-event-debugging-visual-event-2\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#\/schema\/person\/59eb3f78485d68bbbf79e3928a1586ca\"},\"headline\":\"JavaScript Event Debugging mit Visual Event 2\",\"datePublished\":\"2013-05-28T10:16:12+00:00\",\"dateModified\":\"2014-09-25T08:43:43+00:00\",\"commentCount\":0,\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.makes-it-work.de\/2013\/05\/28\/javascript-event-debugging-visual-event-2\/#webpage\"},\"publisher\":{\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.makes-it-work.de\/2013\/05\/28\/javascript-event-debugging-visual-event-2\/#primaryimage\"},\"keywords\":\"addon,debugging,javascript,toolbox\",\"articleSection\":\"Blog,Code\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.makes-it-work.de\/2013\/05\/28\/javascript-event-debugging-visual-event-2\/#respond\"]}]},{\"@type\":[\"Person\"],\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#\/schema\/person\/59eb3f78485d68bbbf79e3928a1586ca\",\"name\":\"Johannes Mitlmeier\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/af5e7a1248b437d35c3569c860cb7269?s=96&d=mm&r=g\",\"caption\":\"Johannes Mitlmeier\"},\"description\":\"Als Webentwickler ist es meine Aufgabe die verf\\u00fcgbaren Techniken so zu verbinden, dass dabei gut bedienbare Produkte entstehen, die die Aufgabe l\\u00f6sen, die der Kunde an uns herangetragen hat.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/posts\/149"}],"collection":[{"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/comments?post=149"}],"version-history":[{"count":6,"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/posts\/149\/revisions"}],"predecessor-version":[{"id":814,"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/posts\/149\/revisions\/814"}],"wp:attachment":[{"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/media?parent=149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/categories?post=149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/tags?post=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}