Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1331
  • Last Modified:

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

0
SAbboushi
Asked:
SAbboushi
  • 4
  • 3
  • 2
1 Solution
 
Michel PlungjanIT ExpertCommented:
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
0
 
SAbboushiAuthor Commented:
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

0
 
Robert SchuttSoftware EngineerCommented:
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()
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
SAbboushiAuthor Commented:
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!
0
 
Robert SchuttSoftware EngineerCommented:
You will have to place the button in one of the frames, that's why you need to refer to the code with through 'top', see for an example: http://schutt.nl/ee/frames.htm

EDIT: spoiler alert, I changed the code in the example already...
0
 
SAbboushiAuthor Commented:
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?
0
 
Robert SchuttSoftware EngineerCommented:
> 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.
0
 
SAbboushiAuthor Commented:
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!
0
 
Michel PlungjanIT ExpertCommented:
Seems you got the same answer twice now ;)
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now