Link to home
Start Free TrialLog in
Avatar of SAbboushi
SAbboushiFlag for United States of America

asked on

How can I debug a bookmarklet in Chrome when the page is frameset?

If I have a page made up of 3 frames, how can I debug a bookmarklet?  Is there somewhere I can put a button in the document?

	...
	</head>
	<frameset cols="25%,*,25%">
	  <frame src="frame_a.htm" />
	  <frame src="frame_b.htm" />
	  <frame src="frame_c.htm" />
	</frameset>
</html>

Open in new window

Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Add console.log to your bookmarklet

What do you mean by adding a button?

Why do you have such issues with your bookmarklets?

Write them as normal code first and add them to the head of the document you need to test.
Does not make a difference if there are frames. The bookmarklet will run in the scope of the frameset document anyway
Avatar of SAbboushi

ASKER

I want to use Chrome's javascript debugger to debug the bookmarklet script (e.g. single step through the code / use breakpoints)

>> What do you mean by adding a button?
Since I don't believe that bookmarklet code is accessible to Chrome's debugger, I added a button to the body of a test document and clicked on this button instead of the bookmarklet in order to use the debugger on the script.

I am examining a bookmarklet that does a Google site search.  If some text is highlighted, then that text is what is searched for; if there is no text highlighted, then a box pops up to prompt for the text before doing the site search (see code below).


>> Why do you have such issues with your bookmarklets?
I am a newbie with html/frames/javascript

>> Write them as normal code first and add them to the head of the document you need to test.   Does not make a difference if there are frames. The bookmarklet will run in the scope of the frameset document anyway

If I have a test document that consists of 3 frames, then there is no body section for me to put the button.  I understand that the script in the head of the document will run in the scope of the frameset document, but how do I add a button to that document to trigger the script (e.g. if I want to select text before the script runs)?

I understand that chrome is written with html/css/javascript and that we can debug chrome using chrome with a remote debug session; if I knew how to do that, then I suspect I would be able to use the chrome debugger to debug the bookmarklet in the remote session without having to add a button to my document.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<script>
			function SearchSite() {
				javascript:
				dd = document.domain;
				s = se(document);
				for (i = 0;
							i < frames.length && !s;
							i++
						)
				    s = se(frames[i].document);
				if (!s || s == '')
				    s = prompt('Google search ' + dd + ' for:', '');
				location.href = ('http://www.google.com/search?as_q=' + s + '&as_sitesearch=' + dd);
				function se(d) {
				    return d.selection ?
				    	d.selection.createRange().text
				    :
				    	d.getSelection()
				}
			}
		</script>
	</head>
	<frameset cols="25%,*,25%">
	  <frame src="frame_a.htm" />
	  <frame src="frame_b.htm" />
	  <frame src="frame_c.htm" />
	</frameset>
</html>

Open in new window

I can't test in Chrome at the moment but in IE I added a bookmarklet (from imilly.com), then in the properties added "debugger;" after "javascript:" and opened up the F12 developer tools, pressed the button "Start debugging" on the script tab and it stopped inside the bookmarklet code.
However, when I made a frameset document it just gave a javascript error.

What you can do to debug the code is put the function in the head section of the frameset document and call it from a button with: top.SearchSite()
Thanks for taking a look
>> and call it from a button with: top.SearchSite()

But where do I place the button?  That is the obstacle I am facing!
ASKER CERTIFIED SOLUTION
Avatar of Robert Schutt
Robert Schutt
Flag of Netherlands image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Very Nice!!!

So it seems the 'for' loop stops after finding the first highlighted text... I didn't realize that you could highlight text from each frame at the same time (I'm such a noob!)

And thanks for teaching me how to create a link for people to drag a bookmarklet.

(!s || s == '')

Open in new window

Did you find a case where   s == ''   was needed?
> Did you find a case where   s == ''   was needed?

No but I suspect that if it's not necessary anymore, it certainly was in older browsers so people keep doing it for backwards compatibility. In some environments you just can't assume that IE6 is not used anymore, but that's just a random example. I really don't know which browser(s) would need the null check and haven't tested taking it out, for me it's almost automatic to first check object 'existance' before testing specific properties, although I agree that in this case it seems nonsense. While googling I did find some strange things that can happen according to other experts: if there is an integer 0 in s, this might evaluate as true:
s == ''

Open in new window

also not tested, it can't happen in your case but still something to think about.
Thanks again for the help and the education.  What you said makes sense - I am such a noob that this was my first experience with how different browsers behave... whatta mess!
Seems you got the same answer twice now ;)