Some guy points out that Firebug does display the source file and line for event handlers. I have a pseudo-class defined somewhere within 11 script files. Could I use Firebug to find out which file did I put it into? *
It's embarrassing when you write a code and you just can't find it while executing it...
* Pseudo-class is just a function that keeps it's namespace after execution. If I put it very simply...
To find the code you can simply use the search field at the top right of Firebug when you are at the Script panel.
Ensure you have checked the option Multiple Files within the search options, then type the name of your "pseudo-class". You can hit Enter multiple times to switch through the matches.
When you found the code, the name of the file is displayed within the panel toolbar. Hover it to get the full URL of the file as tooltip.
Related
I'm trying to click on a webpage item via AppleScript but with no success.
I tried the following code in chrome and safari:
execute "document.getElementById('t-strikethrough').click();"
and
do JavaScript "document.getElementById('t-strikethrough').click();"
In Safari, the first line of code does nothing and the result section of Script Editor says missing value. With Chrome, I get the following error:
Can’t make "document.getElementById('t-strikethrough').click();" into
type specifier
This is included inside tell statements to locate app, window and document.
Without seeing all of your AppleScript code, it's difficult to see exactly what the problem is. You may want to try setting a variable for the URL like this:
set URL of document 1 to "http://www.whatever.com"
do JavaScript "document.getElementById('t-strikethrough').click();" in document 1
Check this post to see the full example . Click Button on Webpage with Applescript/JavaScript
Lets imagine I have a simple page. With the following content.
<form>
<input type="text" id="startText">
</form>
I have a chrome extension with an script that triggers on this page loading. I also have configured all the relevant permission in chrome (i.e. clipboardRead). The script that triggers on page load is called action.js. It currently has a single line of code:
document.getElementById("startText").value = "text";
I know that I can use the "execCommand('paste')" function to paste within a chrome extension. But I can't figure out how to modify the above code, so that it pastes the contents of the user's clipboard into the input element.
I would try something like:
document.getElementById("startText").value.execCommand('paste')
But that, unsurprisingly, does not work.
The clipboard can only be accessed via background pages, due to security reasons. The problem is that background pages cannot interact with the DOM, only content scripts can. Check out this gist, which solves this problem with messages passing between the background page and the content script.
As of 2014 and this bugfix, you can now use copy/paste directly in content_scripts, assuming you have declared the proper permissions in the manifest.
It's important to remember that execCommand('paste') does not return the contents of the clipboard, but actually triggers a paste action into the focused element and selection region of the document. Therefore, the code to paste into your input element would be:
document.getElementById("startText").select();
var didSucceed = document.execCommand('paste');
If you wish to capture formatted text, you will need to use a DIV contentEditable=true instead of a TEXTAREA.
If you would like to see a working example that uses the older method of using a background page, you can see my BBCodePaste extension.
I can't find and set breakpoints for inline javascript that is included in the HTML file. Under debugger->sources it just lists all the external .js files that are loaded for debugging. Where can I find the inline javascript that is in the html? Below you can see it only lists sources which are external js files that are loaded. When I say inline, I mean javascript included between <script type="text/javascript"></script> tages
Note: I know I can use Firebug, but that is not the solution I am looking for.
Assuming the inline scripts are parsed and run, they'll show up in the list of sources using the page name (e.g., foo.html or similar). If you don't see them there, hit F5. If you still don't, it may be that an error prior to them has prevented them from being parsed and run.
For instance, here I have scratchpad.html with script.js, anotherscript.js, and an inline block:
Select http://localhost:3000
Find the snippet you want to debug.
Click the line number where you want to place the breakpoint.
Nice. You just set a breakpoint in your embedded JS.
Assuming that http://localhost:3000 shows you the html you loaded. If not, there will be some tab in that list which does that.
There is a 'prettify source' option in the Sources pane, click that and then add the breakpoint.
I'm trying to implement a UI that would let the end user upload multiple file sot a server, on a custom UI - pretty much the same way GMail or Outlook.net is doing it.
Few things to node:
The <input type="file"> is ugly - and not standard (IE shows a button named 'Browse' to the left of the file name. Chrome shows a button named 'Choose' to the right of the file name).
Most suggestions how to do the UI suggests hiding a input file element with opacity=0, but on top of by custom UI. The 'click' event will open the dialog box, and upon return the file name (without the path) will be available as a $('#file').val(). See this question, as well as the sample on jsfiddle.
I'm also aware HTML5 has a multiple="multiple" attribute now, which will let the user select multiple files.
However, I'm looking for a multiple file solution, which will work on IE8 and above (as well as WebKit, Mozila).
Some people suggested Google is using Flash. This is not true. Their multi file upload is working when flash is disabled.
Now, here is my biggest surprise: Using the developer tools (F12) on both IE and Chrome, looking at both GMail and Outlook.NET - both implementations do not have a <input type='file'> element in the tree (as far as I can tell). Moreover, both implementations are working with IE8 (flash disabled).
What is going on? How do they do it?
EDIT: Why do I think they don't use file input element? Open the developer tools (F12), switch to Console, type: document.getElementsByTagName('input'). There are 24 input elements, 19 of which are type=hidden, none is type=file.
EDIT 2:Thank you all responders and commentators. Indeed - the "there is no other way" argument (in comment) below was valid. As it turns out, both Outlook.NET and GMail will have a <input type='file'> element, which they will add dynamically, only when the user clicks the 'Attach a file' button. Then, they will send a 'click' event to the element, which will trigger the select file dialog.
The witness this, use the F12 development tool (either in Chrome, or in IE), and in the interactive console type: document.querySelectorAll('input[type=file]'). Note that in both implementations, the element is a direct child of body (with display=none).
They do not use iframe for the upload (unlike the only answer below), but simple XHR code to upload, which is now, in HTML5 is available.
The best resource on the Web for how to do it is: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications. I've went through the steps of #Jay below (which are great), but the Mozilla page is simpler, which is my recommendation. Also, take a quick look at the jsfiddle sample on #Niranjan comment.
I recently implemented a multi file upload UI for an old asp.net website, but the concepts should be the same.
I'm not very good at writing (summarizing code) but here goes.
Create a number of IFrames. I had problems trying to write IFrames after the document loaded due to security restrictions, so had the server render as many as I though the user would use at once.
Add an 'upload' button and handler which first adds a load handler to one of the iframes.
var frame = $('iframe:first');
in the frame load handler ---
frame.load(function () { /* all the code below* /});
2.a. Write the input tag for file and what ever other elements you like into the frame like this
frame.contents().find('body').html("html goes here");
2.b. Now add a handler to the file input in your frame and submit that form:
frame.contents().find('#fileUpload').change( /*submit the form */)
2.c. Now invoke the file upload dialog
frame.contents().find('#fileUpload').click();
2.d. Now that line will block until the dialog returns. When it does you have to check the value of the file upload control for null in case they canceled. This is where i marked the iframe as not in use.
2.e. Ether way you'll need to unbind from the load of the iframe and rebind to a different method that will handle the return (upload complete)
frame.unbind('load');
frame.load(function () { /* handle file uploaded */})
2.e.1. This is where I reported success to the user and released the frame so it could be reused.
2.e.2. Finally unbind from load again from the upload complete method
All of that is in your frame load handler
3.Now cause the frame to load
frame.load();
At least thats how I did it. I uploaded all the files to a handler which reported file % and a loop inside the parent page fired off ajax getting and displaying the progress of each file.
The main idea is if you want multi file upload in an 'ajaxy' style but not using flash or Html 5 you'll need to use a collection of iframes and some fancy script.
Hope this helps.
A dynamically-added script is not showing up in the browser's debugger's scripts section.
Explanation:
I need to use and have used
if( someCondition == true ){
$.getScript("myScirpt.js", function() {
alert('Load Complete');
myFunction();
});
}
so that myScript.js can be dynamically loaded on meeting some condition...
And myFunction can be called only after getting the whole script loaded...
But browsers are not showing the dynamically loaded myScript.js in their debugger's script section.
Is there another way round so that all of the goals may be achieved which will make one to be able to debug a dynamically-loaded script there in the browser itself?
You can give your dynamically loaded script a name so that it shows in the Chrome/Firefox JavaScript debugger. To do this you place a comment at the end of the script:
//# sourceURL=filename.js
This file will then show in the "Sources" tab as filename.js. In my experience you can use 's in the name but I get odd behaviour if using /'s.
Since if a domain it is not specified filename.js will appear in a folder called "(no domain)" it is convenient to specify a domain for improving the debugging experience, as an example to see a "custom" folder it is possible to use:
//# sourceURL=browsertools://custom/filename.js
A complete example follows:
window.helloWorld = function helloWorld()
{
console.log('Hello World!');
}
//# sourceURL=browsertools://custom/helloWorld.js
For more information see:
Breakpoints in Dynamic JavaScript
deprecation of //#sourceurl
You can use //# sourceURL= and //# sourceMappingURL= at the end of your script file or script tag.
NOTE: //# sourceURL and //# sourceMappingURL are deprecated.
I tried using the "//# sourceURL=filename.js" that was suggested as a workaround by the OP, but it still wasn't showing up for me in the Sources panel unless it already existed in my tabs from a previous time when it produced an exception.
Coding a "debugger;" line forced it to break at that location. Then once it was in my tabs in the Sources panel, I could set breakpoints like normal and remove the "debugger;" line.
Notice that the source file appearing in the sources tab this way will appear in the (no domain) group and, in case you want to debug it, you will need to add a debugger; line in your code, make that line be executed (usually at the start of the execution of your source file) and then add your breakpoints wherever you want.
In case you are debugging production stages, where you will probably have no debugger; lines in your code, you can make this happen by doing a local map with CharlesProxy to your "fresh copy of the source file with the debbuger line inserted".
When trying to track this sort of thing down in IE, I open the dev tools (F12) and then find where to place the breakpoint by using the following line in the console:
debugger;myFunction();
That switches to the debugger tab where you can step into myFunction() and set the breakpoint.