I am working on a project which involves ad-detection. I wanted to leverage ad block plus code. But I am struggling with understanding it.
I am using adblock plus for chrome and using chrome debugger to step through the code, but whatever breakpoints i set inside most of the javascript files, the control is not getting there. I am only able to see the control going to include.preload.js. I have added the source folder to work space.
Also content script is showing only a few files and breakpoint set in inlcude.preload.js in content scripts is working, but breakpoints set anywhere else dont seem to get hit, not even if they are set in source tree.
Any pointers will be very helpful. I am struggling as I am new to this domain. If there are any books/resources to help understand the working of ad block plus better, please suggest. Thanks in advance.
include.preload.js and include.postload.js only contain the code that's being injected into the page. The core code of the extension is running in its background page which you can debug like this:
Go to chrome://extensions
Check the "Developer mode" checkbox in the top-right corner
Click on the "Background page" link underneath the Adblock Plus entry
So, I've been creating a site based off a template. The site used to work on IE, but I'm afraid that I have made changes since then that causes everything to go haywire. When first visiting the site my grids and alignments are all off and most of the javascript doesnt work. When I activate scripts and ActiveX all of the elements of the site are invisible except for the background. Though, I can still see the source in this instance.
The site (for now) is: http://www.escroft.com/index(main).html
If the site is not displaying when you turn scripts on, you probably have a script error. Open your developer tools with F12, and reload the page; the console should show you what errors you have, and then you're on your way to fixing them.
I am trying to use a really old page on a website I do not have control over (so I can't edit it's resources).
The problem is that it is redirecting the page via javascript (to a 'we don't support this browser' rubbish), via setting document.location before I can set any breakpoints to then debug/workaround.
Is it possible to break as soon as the DOM loads, preferably in chrome?
Disabling javascript stops the redirect, but chrome does not allow me to view any scripts to then place break points.
FireBug has a "Break On Next" feature. I'm not sure if it will work in your case, but it might be worth giving it a quick try: https://getfirebug.com/doc/breakpoints/demo.html#suspend
It seems like Chrome likes to do something to prevent you from seeing the code when you click the stop button before the page finishes loading. It'll say something like window.script123456738391=1;. That makes it so you can't set a breakpoint at the right spot inside the code, especially if there's a redirect on the page before you get a chance to pause it.
What I found you can do is set a breakpoint on that first line. Next time you load the page it will break on the very first line, regardless of what it is. Then you can see all the code the page would load and set breakpoints wherever you want :)
I'm using a contrib drupal module that hooks into a form. Its presence appears to cause the jquery to render unreasonably slowly, but I'm not entirely sure about that.. I want to do some advanced troubleshooting on it, and I'm looking for a tool like xdebug that will give me an output file that I can view with KCacheGrind.
I've looked at Venkman and Firebug, but I don't want a debugging environment; I'm not at that point yet. I want to see a profile of the page load so I can see where the majority of the time was spent so I can identify where the problem is.
Edit: I'm actually not looking for a profile of the page load, as several folks have pointed out, but actually a profile of the javascript executed on a particular event. Firebug's debugger can grab the execution and step me into the code, but it just puts me at one point in the big ol' script. I think the slowdown involves loops and iterations, so I want to see a profile of the execution path.
Actually I think I should post this as a separate question.
In Firebug, click the "Net" tab. It lists every element it requests from the server, and detailed connection and load information (on hover) with a nice graphic display without hover.
Update
In addition, if actual page load isn't the issue, and you are indeed trying to profile Javascript, the Firebug "Console" tab probably has what you need.
Click "Profile" and then reload the page. Click "Profile" again to see a list of everything the javascript did with duration and timing information. This should show you what is taking the longest.
The chrome developer tools has a javascript profiler, that will profile all of the function calls on your page. The timeline feature (might only be in beta/dev versions) will show how much time the browser spends on various operations (layout and rendering for example) operations.
I believe that firebug also has a JS profiler.
There is a profiler in firebug in the console tab. Click once to start and second to stop the profiler. Chrome has also a profiler press ⌘⌥j. There is also a good profiling tool for internet explorer: dynaTrace ajax editon.
Btw. most of the time jquery is slow depends on wrong use of the selector engine.
How do I "dynamically" edit JavaScript code in the Chrome debugger? It's not for me, so I don't have access to the source file. I want to edit code and see what effects they have on the page, in this case stopping an animation from queuing up a bunch of times.
I came across this today, when I was playing around with someone else's website.
I realized I could attach a break-point in the debugger to some line of code before what I wanted to dynamically edit. And since break-points stay even after a reload of the page, I was able to edit the changes I wanted while paused at break-point and then continued to let the page load.
So as a quick work around, and if it works with your situation:
Add a break-point at an earlier point in the script
Reload page
Edit your changes into the code
CTRL + s (save changes)
Unpause the debugger
You can use the built-in JavaScript debugger in Chrome Developer Tools under the "Scripts" tab (in later versions it's the "Sources" tab), but changes you apply to the code are expressed only at the time when execution passes through them. That means changes to the code that is not running after the page loads will not have an effect. Unlike e.g. changes to the code residing in the mouseover handlers, which you can test on the fly.
There is a video from Google I/O 2010 event introducing other capabilities of Chrome Developer Tools.
You can use "Overrides" in Chrome to persist javascript changes between page loads, even where you aren't hosting the original source.
Create a folder under Developer Tools > Sources > Overrides
Chrome will ask for permission to the folder, click Allow
Edit the file in Sources>Page then save (ctrl-s). A purple dot will indicate the file is saved locally.
This is what you are looking for:
1.- Navigate to the Source tab and open the javascript file
2.- Edit the file, right-click it and a menu will appear: click Save and save it locally.
In order to view the diff or revert your changes, right-click and select the option Local Modifications... from the menu. You will see your changes diff with respect to the original file if you expand the timestamp shown.
More detailed info here: http://www.sitepoint.com/edit-source-files-in-chrome/
Chrome Overrides
Open the JS file in the sources panel.
Right Click on script src URL > Reveal in Sources panel
Make sure "Enable Local Overrides" is checked.
Right Click anywhere in the JS file > Save for overrides
All Set!
Just edit the file, and save with CMD/CTRL + S. Now whenever you refresh the page, it'll use the modified file. (As long as the filename remains the same)
You'll know it's working if you see a purple dot in the file icon.
Place a breakpoint
Right click on the breakpoint and select 'Edit breakpoint'
Insert your code. Use SHIFT+ENTER to create a new line.
Pretty easy, go to the 'scripts' tab. And select the source file you want and double-click any line to edit it.
If its javascript that runs on a button click, then making the change under Sources>Sources (in the developer tools in chrome ) and pressing Ctrl +S to save, is enough. I do this all the time.
If you refresh the page, your javascript changes would be gone, but chrome will still remember your break points.
As this is quite popular question that deals with live-editing of JS, I want to point out another useful option. As described by svjacob in his answer:
I realized I could attach a break-point in the debugger to some line of code before what I wanted to dynamically edit. And since break-points stay even after a reload of the page, I was able to edit the changes I wanted while paused at break-point and then continued to let the page load.
The above solution didn't work for me for quite large JS (webpack bundle - 3.21MB minified version, 130k lines of code in prettified version) - chrome crashed and asked for page reloading which reverted any saved changes. The way to go in this case was Fiddler where you can set AutoRespond option to replace any remote resource with any local file from your computer - see this SO question for details.
In my case I also had to add CORS headers to fiddler to successfully mock response.
Now google chrome has introduce new feature. By Using this feature You can edit you code in chrome browse. (Permanent change on code location)
For that Press F12 --> Source Tab -- (right side) --> File System - in that please select your location of code. and then chrome browser will ask you permission and after that code will be sink with green color. and you can modify your code and it will also reflect on you code location (It means it will Permanent change)
Thanks
Just like #mark 's answer, we can create a Snippets in Chrome DevTools, to override the default JavaScript. Finally, we can see what effects they have on the page.
here's a gentle introduction to the js debugger in chrome that i wrote. Maybe it will help others looking for info on this: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/
you can edit the javascrpit files dynamically in the Chrome debugger, under the Sources tab, however your changes will be lost if you refresh the page, to pause page loading before doing your changes, you will need to set a break point then reload the page and edit your changes and finally unpause the debugger to see your changes take effect.
I was looking for a way to change the script and debug that new script. Way I managed to do that is:
Set the breakpoint in the first line of the script you want to change and debug.
Reload the page so the breakpoint is being hit
Paste your new script and set desired breakpoints in it
Ctrl+s, and the page will refresh causing that breakpoint in first line to be hit.
F8 to continue, and now your newly pasted script replaces original one as long as no redirections and reloads are made.
Chrome DevTools has a Snippets panel where you can create and edit JavaScript code as you would in an editor, and execute it.
Open DevTools, then select the Sources panel, then select the Snippets tab.
https://developers.google.com/web/tools/chrome-devtools/snippets