I need to troubleshoot a problem with javascript drag and drop and need some counsel as far as the proper way to do it. I have some experience working in the console and often using inspect in Chrome browser. I don't mind installing other browser extensions if they will help. The problem is a drag and drop function that works in some circumstances and not in others. This takes place on two separate pages of the same type in a Rails application that should have all the same javascript present. My plan of attack is the following but feel free to advise me otherwise:
Find the javascript code responsible for the drag and drop. How do I do that?
Debug the code. I think by setting breakpoints and stepping through it and comparing it on two separate pages, one where it's working and the other where it's not. Will I run into problems debugging, though, since drag and drop requires me to hold down the mouse button and traverse the tracking pad at the same time and the instant I stop I will no longer be running through the drag and drop code?
EDIT: I found Firebug's Profile tab in Firefox and using that I can see that in the page that works just mousing over a blank part of the page fires off 5 js functions, while nothing happens doing the same on the other page. So apparently the working page is listening for events that the non-working page is not, though the pages should be identical in that aspect as they are generated from the same code. Now the question is how can I find out why these listeners aren't there on the non-working page?
Related
When making myself familiar with unknown code, I often find myself trapped in a situation where I have a huge amount of javscript files and some events triggered when I click around in the browser, which I want to detect in the code. However, regarding the amount of js code, this seems to be a non-trivial task to me.
Is there any tool / workaround that supports me? Like logging every js function called or the like?
The way of debugging js is different in different browser. I will show how to debug in chrome.
First of all, inspect the button in chrome using chrome developer tools.
Then you can see the event listeners attached to that particular button. Make sure ancestors all checkbox is unchecked and the link below the event listener will you to particular code file.
I know a small amount of web development but not enough to make it a career. I am working for an organization that is restricted to using internet explorer and one of the main sites that we use is constantly undergoing changes and always has bugs.
I'd like to see if I can try to see some of the code behind the bugs sometimes. When I use developer tools on the site, I can see that there are about 20 or more JavaScript files downloaded. Each file is a few hundred to a few thousand lines long. Is there any type of tool that I can use in Internet Explorer browser tools that can show me what JavaScript is being executed when actions happen on the webpage?
e.g.: I click a button and a form appears. I then click a button on that form and a snackbar appears, but it always appears in random places. Is there any way I can see the JavaScript that was executed to display the snackbar, rather than search line by line in the JavaScript?
Well the answer is yes, but for more complicated sites it will be a painful experience. Without concrete knowledge of the javascript framework/library used it will often be near impossible.
Having the sourcecode for the website would help greatly. When the website has minified javascript it's pretty much a must.
Sometimes an element like a button will have an onclick attribute which makes a function call. Other time some function is attached to an element from javascript by addressing it by it's id etc.
Searching through the scripts using the F12 tools in Internet Explorer is very limited.
You can of course download some of the javascript files so you can browse them in a text/code editor. They may improve you ability to search etc.
If you can find some entry point you could use breakpoints with the debugger and step through to see what happens and what gets called.
I'm working on my first jQuery Mobile site, which is a (prototype for) a Location Based Game in Brisbane, Australia: www.jsjensen.dk/soleil/
My question is based on viewing from a mobile device, but a desktop device have very similar problems. I have tested with Chrome and Safari on iPhone, iPad, and Mac. Same problem everywhere.
I think it's related to how jQuery Mobile loads and displays pages, but I'm not using multiple pages in one HTML document, but have multiple HTML document.
If you go to the website above and then click "QUESTS" in the menu, followed by "Stairway to Knowledge" you will end on /soleil/quest01.html (desktop) and /soleil/#/soleil/quest01.html. That "#/soleil" really confuses me!
In this first try the JavaScript for handling answers in the text input is not loaded. That means nothing happens when you press "Unlock".
Now, if you reload on desktop or edit the address on iOS to /soleil/quest01.html (which is the actual and real file) it will reload the page with the right JavaScript loaded and initialized.
Now I'm able to go back (pressing "QUESTS" in the menu) and then go to another page (e.g. "Citadel of Fun") with the same problem: the JavaScript not loading. If I go back to the other one ("Stairway to Knowledge") the JavaScript is, however, still loaded and working just fine.
So what happens here? I'm pretty sure my linking/coding is correct, but it's just a basic understanding of jQuery Mobile that I'm missing. Can I change something to make this work? It could really be awesome!
So, I found a way to fix it, but not really a solution to the original problem.
I've added rel="external" to the tags pointing to the pages where I had problems. In this way it will not use the AJAX system to load these pages, but do it in a regular way. This solved my problem, but now I can't make any fancy transitions.
I have a php page that hangs for 3-10 seconds after the page loads, you can't even scroll up or down, or close the tab when this happens. (the chrome loading gif still loops tho) Happens in Chrome and IE.
Chrome Timeline: http://imgur.com/wF5Pioz,KRbnxIm#0
Shows ContentVeil.js repeating over and over. I think it is client side(?), I did a grepWIN to search for ContentVeil, with no luck, and it doesn't show up in Chrome Network tab.
Chrome Profile: Second image, from above link.
I think this shows the issue at the anonymous function from meta-boxes.min.js, ln 1.
meta-boxes.min.js: http://pastebin.com/yqtJyqB1
Unfortunately line one is a function that encapsulates the whole script. I don't know js very well, I tried to just remove each function one by one but that just created more errors.
Any ideas on how I could find the source of the problem would be much appreciated.
It's part of the Evernote web clipping extension, and it's hooks DOM events, causing massive slowdowns if you are doing large amount of dom changes.
As a freelance Wordpress developer I find myself thrown into projects where things are just 'broken' - with the problems regularly ending up being some kind of path issue/syntax error/etc in javascript.
I am in the situation right now where I am trying to get something that works in Site A to work on Site B. Basically the problem involves a mouse over event that causes a div with class name 'overlay-ico' to appear.
I'm sure there must be some kind of debug tool in Chrome, Firefox, etc that allows me to easily do this without reviewing all the source code?
Update:
I am familiar with being able to inspect the HTML (at least in a basic way), but I don't see how this shows me what would trigger an event to occur.
I am also know that there is a console, which as I understand it, only outputs errors, or something that has been explicitly directed to console output.
There must be somewhere in the code that is waiting for a mouse over event, that triggers 'overlay-ico' to appear. I'm sure I could do it if I did a search for 'overlay-ico' through all the source code - but I'm thinking there must be a faster way to find it.
In Windows, F12 opens the debug panel in most browsers.
In Chrome, you can inspect an element and then click into the Event Listeners tab in the right pane. That may show what you're after. It's hard to say without seeing it.