Hello. I'm fixing some scripts from website which made by other one.
First I should look all of existing scripts but chrome dev tool doesn't show all of the source code in script tag.
I tried to copy it but still copied with "...".
I searched some keyword from the whole webpage code and I can find it in hidden part so maybe Chrome get a full script but just not showing to me.
How can I see all of scripts?
Double click the ellipsis or single click on the arrow to expand the script region:
You could also try right click and copy the outer HTML or you can edit the node as HTML inline... Explore the other options available to you in the context menu:
NOTE: If you are editing an existing web page you should probably start with the source code for the site and use an HTML code editor to edit the page and scripts, otherwise any changes you make wont be fixing the site for all users, the changes will be just for you.
I have a html file that will be run locally using IE. I want it to function more like an app, it will not be published to a site, I'm only using IE to view it. The code that follows will provide basic functions to do simple calculations. I've not been able to successfully use the window.onload event to create a new window that removes the scroll bar, title bar, menu, etc without it looping. I'm not sure if an If statement or a while statement is best for testing if the page is already open to stop the loop and I'm having a hard time understanding the syntax of how to test if the window.onload already has the window open. I guess I'm looking for some guidance on setting this up or a reference easily understood by a beginner. Thank you.
I at present have two html files. The first, its only purpose in life is to trigger the second to load as I want it to show.
function openWindow()
{
window.open("CouchShifts.html", "", "status=no,toolbar=no,menubar=no,navigationbar=no,location=no,resizable=no,scrollbars=n, width=440,height=200'");
}
window.onload = openWindow()
window.close("test.html")
I had tried to incorporate this idea into the original html file without success. Any starts on how to better handle this so that when the standalone html file is double clicked from the desk top it open as specified above only once without looping?
It's not wise to check window is open or not in the same windows onLoad. You should check it rather in the event that actually opens the window.
Here are some solutions for this.
Check if window is already open window.open
https://stackoverflow.com/a/10467344/672455
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
The code below works on one page, but not another page (the place it should be - the same place as on the other page) - is blank.
This code displays the facebook like button, and is copied verbatim from the facebook website.
The code is there - I checked "view page source" in Firefox, it just isn't doing anything.
I can put another script, the "find us on facebook" button, either directly above or below this code, and that shows up okay.
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like
href="http://www.facebook.com/pages/[our name]/[our number]" layout="box_count"
show_faces="false" width="50"></fb:like>
UPDATE
If I use the iframe code instead of the XFBML code from: http://developers.facebook.com/docs/reference/plugins/like/ then it works on both pages (but I can't format that right - Wordpress doesn't like iframes in widgets).
What is going on?
UPDATE
When I disable the Wordpress Facebook Share plugin this problem goes away. There may be a problem with double initialization of the Facebook SDK, as pointed out by Chris Livey below. Is there some html I can add before the "like" code to de-initialize the SDK?
Do you have firebug? If not I would recommend downloading it:
http://getfirebug.com/
It has a console that lets you know exactly what is going wrong in JavaScript land.
You mentioned Firefox. You should start with looking in the Tools | Error Console to see if any javascript errors occurred during the page load.
The next step is to get the firebug addon and use it to see what might be happening.
(removed update - info did not apply)
UPDATE:
Okay, the word press plug in clobbering you. If you are going to keep the word press plug in then remove this:
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
From your button code and everything should work just fine.
UPDATE 2:
From all of the comments, this issue boiled down to a word press plugin using it's own javascript definition for the FB object. Fortunately before creating that object it performs a test to see if FB is already defined.
The fix then is to add the correct FB script to the top of the page such that it is executed by the browser BEFORE the word press FB Share button plugin script. Because it is executed first, the word press plugin can't screw it up while continuing to function correctly.
This only works if the browser executes the scripts in the order seen on the page.
The real fix would be for the word press plugin to be modified to use the full FB object from connect.facebook.com instead of the smaller one it provides.
http://www.fireviews.com/testing/tabs_and_toggles.html
The buttons with + signs are supposed to be drop-down toggles, and the mini-tabs below them should function as tabs. And at the bottom, the sample images should load (not just the spinning loader) and when clicked they should magnify the image, not go to another page. Also the magnifying glass in the top right should pop up a search bar when moused over. But none of this is working!
I think it may have something to do with the directory the js files are in (as I had to move them from their original location) but I thought I changed all the paths properly.
Can anyone help me identify where the errors/problems are?
You need to use debugging tools that will reveal JavaScript errors to you. Just by opening your page in Firefox, I get:
Error: jQuery("a[rel^='prettyPhoto'], a[rel^='lightbox']").prettyPhoto is not a function
Source File: http://www.fireviews.com/design/js/custom.js
Line: 239
And if I look at your JavaScript files, I see that http://www.fireviews.com/design/js/prettyPhoto//design/js/jquery.prettyPhoto.js is not actually JavaScript. That's your problem.
See: What is a good Javascript debugging tool?
Your prettyphoto.js is actually a HTML file.