Breakpoint on DOM load - javascript

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 :)

Related

List of all webrequests in chrome extension

Im playing around with making my first chrome extension. Im making a small extension that monitors the webrequests a page makes. This means that im listening to the: chrome.webRequest.onBeforeRequest.addListener event
I am a little confused on how to execute this code on every page i load. It works on any page if i open the extension web page and run the code in this context. However i would like it to run regardless of having the page open. How do i go around doing this?
I looked at content_scripts, but havent figured out if they are the proper path to take - and ven if they are how do i send a message from my content script to my web page notifying it to run the code. As far as i understand this the content script is first run after the page has been loaded and therefore it does not matter if i call my page and add the listeners, because the show is already over - is this correct?
The wa i understand this is that i cannot add listeners in the content script - hence the need to make this messaging thing - is this correct?
Thank you.
You would put the onBeforeRequest listener in a background page, specifically the persistent variant of it. When the event is invoked, whatever you have in the handler will be run.

F5 not fully refreshing my page

I've got a pretty complex webpage which uses alot of Ajax and Javascript. My problem is that this Javascript manipulates the background-picture in a div (scrolling it to the sides). When I hit F5 (mostly in FF) this only causes a "halfway" refresh. The content refreshes, but the background in the div stays in the same position. This causes problems because the offset is calculated wrong (the script thinks the background is at starting-position, but actually, it's moved).
Is there any way of forcing a full refresh to get rid of this problem? I am using jQuery for my Javascript. A workaround would be to check the offset at load, but this would be a pain in the ass to implement at this point.
Any ideas?
EDIT: The picture causing this problem is not loaded using javascript or ajax. It's pure, static html.
Try to use "Ctrl + F5", it will force your browser to reload every content in the page.
Why don't you just reset the state of the background to it's default when the page loads?
Is there a reason why that wouldn't work?
$(document).ready(function(){
// Set whatever value you're changing to make the background move to it's default
$('.changing-background').css({
'left' : ?px,
'background-position' : ?px ?px
// Whatever you're using
})
})
Add a unique string to the end of your javascript file path e.g. test.js?nocache=99999999. This will make the browser think it's a non-cached file and download a new copy every time.
It's meaning more data transfer, but unless you want to implement a client side fix I don't think there's much choice here.
If you just pressed F5 it will load the contents from the cache.So use " Ctrl+F5 " .It refreshes the browser cache also at the time of reload.
In Mozilla Firefox, Ctrl+Shift+P starts private browsing and nothing gets cached. or you can set cache:false to your ajax requests like
$.ajaxSetup({
cache:false
});
add no-cache
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
further information can be found here

How do you break out of frames without breaking the browser's back button?

A site that links to mine keeps my site in a frame, so I added the following JavaScript to my page:
if (window.top.location != window.location) {
window.top.location = window.location
}
Now if I get to my site via the offending site, my site successfully breaks out of the frame. But the back button breaks! The back button sends the user to the framed version of my site, which immediately breaks out again, returning him to where he was trying to leave! Is there a simple way to fix this?
window.top.location.replace(window.location);
The replace method is specifically for this purpose. It replaces the current item in the history state with the new destination so that the back button won't go through the destination you don't want.
jfriend00's answer is indeed correct. Using the window.location.replace method will work without affecting the back button.
However, I'd just like to note that whenever you want to stop a page from being framed, you should do more than just that! There are a couple methods of preventing a simple script like that from breaking out of the frame, which work in many modern browsers. Perhaps you can disable the page, display a message with a link to the full page, something like that. You could also use the X-Frame-Options response header that tells the browser not to display the page in a frame. If you don't take some of these measures, your site could be clickjacked.
Another solution is to open your site in a new window leaving a friendly message in the iframed site:
if (parent.frames.length)
{ window.open("mySite.htm", "MySite");
location.href= "framedMessage.htm";
}
Where framedMessage.htm contains some friendly/warning message.

Editing in the Chrome debugger

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

Firefox Firebug Extension - Freeze Javascript Feature?

How can I freeze Javascript in firebug so that i can inspect the changes made by it in the html? If for example i have a jQuery rollover effect and i want to inspect the html code in that point in time.
I believe Dreamweaver CS4 has this feature titled freeze javascript and live code. Is there a free equivalent either in Firebug or another Firefox extension?
By "freeze" I assume you mean debugging, and yes, Firebug definitely has that.
First you have to go into the Script tab on Firebug. If Script is disabled on the site, enable it.
Now, go to the dropdown and select which JavaScript file you want to debug. This is typically either the page itself with inline JavaScript, or a linked page. Find the line of code you want to freeze on, and click to the left of the line numbers. You'll see a red dot appear - this dot denotes that the code will freeze there during execution. Once the code is there, you can access the current HTML by going to the "HTML" tab. You'll also see the icons in the top-right corner of Firebug's Script pane light up, allowing you to either continue execution, step over, step into, or step out of each line of code, observing HTML changes for each line executed.
Note that Firebug lets you step through code line-by-line, which means that minimized JavaScript files (wherein all the code is compacted onto one line) are absolutely awful for debugging, because you can't tell where Firebug is. So for debugging purposes, I highly recommend getting the non-minimized versions of files.
If you need more help, I suggest checking out the Firebug documentation, which has some good guides.
Break on mutate (the pause button when the html tab is selected) is the closest thing I can find to this feature. It will pause the next time something is changed. It's just one off of what you want, but could be useful.
not exactly firefox function, but appears close enough (at least in the way I understand the question):
Get CheatEngine
Open firefox process
Check "enable speedhack"
Set speed to 0
Apply
All scripts are now effectively paused
You can test this on a javascript clock here.
I'm kind of dissapointed that noone has created a plugin for firefox, which would do the same.
In the Script tab of Firebug, you can set break points in Javascript that will allow you to step through code, set watches, and do other things you would in other debuggers. You can also switch to the HTML tab and see what changes have been made while Javascript is "frozen."
In Firebug, go to the script tab. On the top, you can see:
Inspect | all | <filename>
Click on to choose the file that contain the javascript you want to track. Once you have selected your file, click on a line number to put a brea kpoint (a big red dot will appear).
You can put several break points in different files. The break point will not disappear if you refresh the page (F5).
This tutorial should help you as well.

Categories