There are many JavaScript include files in my page. I need to find the location of the JavaScript function named "addIndustryBtnClick(this)". I did the following steps:
Opened Dev Tool in Chrome
Selected "Sources" on top.
Selected "Sources" from left window.
Clicked on the directory name of the project.
Now I can see the page source on the middle window.
I have searched the function name and it is highlighted with yellow color.
Here is the screen shot of the current window:
I have searched on each JavaScript include files on the left window and I could find the function definition. But is it possible to find function definition without going to each JavaScript file?
If you want to search through a series of files for a specific
JavaScript function without manually digging through each file, you
can do that by selecting the tab on the lower console and running
your search there.
Related
How would I find this file if it didn't has breackpoint in it? Filename is axios-setToken.js and it is displayed in top tab, but not in navigator.
If you press Ctrl+P and start typing the filename, devtools should find the file and list it below; clicking it opens it. I use that often when files aren't listed in the navigation pane for whatever reason.
You see a message about this when there are no open editors:
Here for instance I've opened devtools on this SO page, opened a file (just to show that Ctrl+P works even when there's already an editor open), and typed the first three letters of "jQuery" since I know SO uses jQuery:
As you can see, it found jquery.min.js for me.
This is often handy even when files are listed in the navigator.
Is there a way how I can grab html svg from a webpage using js console in Chrome e.g.? Svg code is wrapped with svg tag. And is it possible to save svg to local machine? or convert it to the image? and is it possible to import svg data ( e.g. charts/ graphs ) to google docs or excel?
You have access to the complete dom and the js objects provided by the browser ( eg. a xpath processor) as well as external libraries.
so all you need is a unique identification of the svg element in question.
start off importing jquery on the fly and selecting all svg elements on the page. this assumes that you have loaded the page you are investigating and have opened the console. the following statements should be entered at the command prompt:
var e = document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('src','http://code.jquery.com/jquery-1.10.2.min.js');
(document.getElementsByTagName('head'))[0].appendChild(e);
$('svg');
the last command will provide you with a dom fragment containing the svg element.
the preceding vanilla javascript commands add a script element referencing the jquery library to the current web page. jquery simplifies the dom handling substantially, however, it is not necessary strictly speaking (see fr32c's answer).
if you're done, choose the 'reveal in elements panel' entry of the context menu of the console output just generated. you'll be redirected to the element inside a folding hierarchy representation of the page dom. choose 'copy as html' from the context menu of the svg element selected. save the clipboard data as a svg file.
Note
in chrome (29) and opera (12), jquery is imported in the console, which reduces the element query to $('svg') (thanks to Ir0nm for this information).
Answering part one of your question :
If you're trying to locate the svg tag by the console, you can get it with :
document.getElementsByTagName('svg')[0]
if you have multiple svgs embedded on the page, change the [0] (or remove it) to catch the right part.
From there, you could right click to view that svg element in the elements panel, and from there copy as xhtml. (i tried that line with this page : http://www.w3schools.com/html/html5_svg.asp )
In webkit browsers you can right click on SVG element and choose "Inspect Element". this will open the Web Inspector tool. Typically from there you can right click on the svg node and "Copy As HTML", or from the console type $0.outerHTML
Then paste SVG into a local document. You could then use phantomjs to rasterize it.
Old versions of Opera (v12 and older) had the unique ability to right click the SVG image, and "Copy Image"; this would put a raster image on your clipboard - (I abused this feature back in the day.) - disclaimer: i use a mac, may be different on windows.
Just been looking at this and came across svg-crowbar - a chrome specific bookmark. You put it on your bookmark bar, and on a page with SVG you click on the bookmark. A box will hover over each SVG with a download button.
The downloaded SVG also includes the relevant style information, in case the SVG has been styled using CSS.
Solutions that work for me (on a Mac):
1 - Drag the Logo to your desktop (any browser)
In some cases, the code of the page allows you to drag the .SVG file from the website directly onto your desktop or chosen folder. Super easy!
2 - Print to PDF (Safari, Firefox)
This requires a little more work and might now always work. On the Print dialog, go to PDF > Save as PDF. The preview should allow you to see if the logo will be exported or not (sometimes, it doesn't work).
After export, you can open the file in the vector editing app of your choice.
3 - Drag and drop from Chrome's Inspector
This one might work in desperate cases. Inspect the logo element, and hover over its name. A little window with a thumbnail will appear with the logo inside. Click the small logo, drag it to a folder.
There might be other solutions like mentioned above (copy the code and convert it somehow - in the third website example I showed this didn't work because the code looks like this, or SVG Crowbar also works sometimes (and sometimes not - like when the download boxes are overlapping).
When I right click on the icon for my extension-in-development and click Inspect Popup (or when I click the icon and choose "Inspect Element") and look under the "Sources" tab, my .js file is nowhere to be seen - only a long list of inspect-able files like apitest, devtools, json_schema, etc. I can, however, find the code through the Elements tab by following the link in the .html file, but that doesn't bring to anywhere where I can actual debugging.
I've also loaded the "Hello, world" extension that Google's tutorial provides, and when I Inspect that one, its .js file is right there. I can't imagine what I've done differently from the tutorial example to cause this.
It's Chrome version 22.0.1229.94 run in a Linux VM. If there's any more information I should be providing, please let me know.
Type location.reload(true) in the console.
http://developer.chrome.com/extensions/tut_debugging.html
If I understand your question right,
Under the sources tab, there are two more tabs, one says Sources and the other says Content scripts. You need to click on the content scripts tab, and there you will find what you are looking for.
Okay So I figured it out, simply click on you extension icon, and a little dialog will pop up, then right click on it and click on inspect element. You can figure it out from there I reckon. (My other answer would be good if it was a content script, but this is a popup script.)
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
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.