I am using the google chrome to debugging the javascript source file, now I could debbugging the output js file, but the output js file is not human friendly readable. It looks like this:
from the google chrome console, I can see the call stack, and the google chrome tips shows that the source map are avaliable. But how to navigate the the js source file with current debugging line? I already type command + P in macOS but just shows the source files, I did not know which line should to navigate. the call stack only show the output js file line number.
Next to the "Page" tab (you can make the side bar bigger or click on those two arrows, there you will find the "Filesystem tab". If you add the corresponding folder to the workspace you will be able to edit and save those files.
Here's an article that explains it in details using a python server.
(note that you can use any local server you'd like)
(note that it won't work with local files url like file:///)
If you are trying to debug your current JS file at line 23487, steps would be to-
Load URL.
Open chrome debugger tools.
Put debug point on desired line.
Reload the URL, the debugger will pause at debug point.
You can watch below video for this, specifically #10:40 timestamp.
https://www.youtube.com/watch?v=WmVEddplwbo
Okay, here's a weird issue for you guy sand gals.
I'm using a window.open tag in JS to open a .cfm file that will open in Excel (Report), however, the appended URL variable appears to change. It seems that the ? gets changed to an _ and thus the browser thinks its a text file and not a web page. Any Ideas??
window.open("amal_reports/rpt_change_indicator_notes.cfm?batch="+selBatch);
The URL should be
http://example.com/amal_reports/rpt_change_indicator_notes.cfm?batch=1160 but when the browser asks what do with the file it says
rpt_change_indicator_notes_cfm_batch=1160 and wants to open a text
file.
If I call the report directly in the URL without the form or JS stuff the same thing happens, conversely, if I remove the URl variable (?batch=1160) the report opens in Excel as expected but no data is populated because the batch number is missing.
So, to summarize, the browser is changing my .cfm link from js or directly in the browser to _cfm and thus it won't open in Excel as expected.
Okay, developer error! It looks as though checking the developers tool (F12) based upon theGleep suggestion, I found that my page was missing or couldn't find a variable. Once that was corrected the report open as expected.
the chrome dev tool gives me a error. actually i'm trying to get an http ressource from an https webpage :
i don't know where these files are called to change the target. i guess we can know with the chrome dev tool but can't find how. i would like to know which file is firing the call, which line... (if i get only the filename, it's fine)
someone can help ?
The blue box in the picture below represents the link to the exact line that caused the error. The format is filename:XX, where filename is the name of the file where the script originated, and XX is the line of code within that file.
Click the link to see that line of code in the Sources panel. If the file is minified, click the Format button to pretty-print it.
In the Chrome debugger's 'Network' tab, the 'Other' sub-tab shows a .flv Flash file being played. I'm trying to figure out exactly where/how that .flv URL is being generated, but I've looked through the JS for the site and can't figure out where it comes from.
Is there a way to set a breakpoint for when that .flv file starts getting streamed/played so that I can figure out how it's URL is being put constructed?
The request headers for the flv file in the Chrome debugger show X-Requested-With:ShockwaveFlash/24.0.0.194. So the request comes from Flash rather than from a JS file I think.
Or any other ways to figure it out?
Either the embedded SWF (Flash) app has specific code to construct the url (then method is unknowable) or else the app is reading the url from somewhere like a JSON or XML text file.
It could also construct by reading the text within an HTML / JS file. Third possibility is that PHP is involved in generating a link. So check the Network tab for such things (xml, json,php files which you open in a "new tab" to read).
Was there no flv found when you word-search the source of html or JS?... If all else fails then provide a testable link.
PS: To answer your Question : There's no loader breakpoints / load pausing in Chrome.
On Network tab you have multiple columns. One of them it's called Initiator. If' is missing, right click on any column and a dropdown with all columns available will appear. Check Initiator column.
That column should tell you what you need to find out.
I know about Workspaces recently introduced in DevTools but that is not that i need. For example: page uses jquery that is loaded from CDN, i modify jquery library code, press ctrl-s, reload page -> modifications are lost. Or i want to debug some site i don't have an ability to change files of.
I don't want only save changes as in save CSS - while browsing, how can I save the css files from inside chrome dev or firebug to local directory, i want them to persist between page reloads.
You got most of it, but here's the slight change:
Make a change in the Styles pane (or in Sources), then click over to Sources, and when your modified file is open, hit ctrl-s.
Then you can right-click the asset in the Sources list and hit Save As... and save the new modified file to disk.
There is no way to save a modified remote file without persisting it to disk and expect it to be changed on reload.
Workspaces allow you to edit files mapped to a local directory - but naturally, a pre-requisite is to be serving local files.
If you're playing with files you don't have direct/convenient access to (for whatever reason), I recommend setting up a tampering proxy like Burp. In a nutshell, you would be able to modify the server response and perform on-the-fly search and replace like cdn.example.com/jquery-library.js to localhost:8080/jquery-library.js in the html body. All you have to do afterwards is set up a local server (trivial) and edit the local instance of the script!
This is a handy pattern to preview local changes against production content, as long as it's not used in lieu of a test environment.
It is possible, but quite tricky:
open resources and right clik to the folder with styles\resources (fo
not forget to click "allow" on the dialog that appears below the
adress bar)
then right click on the concrete resource and choose "save as" (save
it to the working directory that you specified in the prev step)
then right click to the same resource and choose "Map to file system
resource" (write the same name as in prev. step, e.g. all.css but not
all.css?id=234234234, just in case)
modify the styles in the dev tools.
refresh the page (and realise that all you modifications doesn't
applied)
open resources, find your workspace folder and your resource in it
(e.g. all.css)
right click on that resource and choose "local modifications"
in opened console click to "apply original content" and realise that
you styles has been applied =)
It's quit a tricky way and the better idea is to use something like fiddler to replace resources to local files.
You could try it this way (for jquery):
-load the page first time and on the sources tab put a breakpoint on line number 1
-then reload the page modify the file and save ( you can see that the page has paused due to the breakpoint )
-press the play button and the page will start to load.
The modifications you made will work. The downside of this solution is that once you refresh again the page, the modifications will be lost.
Hope that helps!
As far as I can tell, there's no way to do this in Chrome's DevTools. You should look through the documentation about saving and making local changes. The only thing that seems to persist through reloads is snippets... but it doesn't seem like that's what you want.
If ever a solution for this is made... I want it. For now, it seems the best you can do is content scripts and the like.
I don't know if this qualifies as an answer, but it is what I am doing, and the closer that I have get to what you want.
I load the page in the browser, and the I do save as in a local file. Note that I am saving the full page, with HTML, js and CSS.
Now, if I want to modify the a CSS, I edit the HTML and direct these file (or files) to my development files.
I reload the page, and now I can work as you want (saving and reloading what I have saved).
Of course that means that you have full access to the files, and most probably they are local, but I don't think that you are really willing to edit the real web files on line.
When I am finished modifying the files, it's just a matter of syncing my dev files with the web files .
Just a tip, under Firefox i use Greasemonkey. I dont know if you know this tool, but it allows to run javascript scripts over a webpage for a website. Then, with an adapted javascript you can change css dynamically.
A little get started for greasemonkey:
http://www.webmonkey.com/2010/02/get_started_with_greasemonkey/
For chrome it is tampermonkey :
http://tampermonkey.net/faq.php
I use my apache in debug mode with eclipse so the cahnges are reflected to the site as soon as I save the page.
Note, Utilizes jQuery library (not required)
Try, at console
function restyle() {
$("*").css("color", "blue"); /* development elements, css, js */
$("head").append("<script>console.log(\"restyle\")</script>"); /* js */
var t = document.querySelectorAll("*"); /* modified document */
var outer = document.documentElement.outerHTML; /* modified document */
var inner = document.documentElement.innerHTML; /* modified document */
return $.ajax() /* `pseudo` `reload` */
.done(function(data) { /* original document */
document.documentElement.innerHTML = outer; /* `psuudo` `document` `reload` */
console.log(data, inner, outer, $(t)) /* options, `callbacks` */
/* $.each($(t), function(index, value) { console.log(value) }); */
})
};
restyle();
See https://stackoverflow.com/a/31585725/52817:
The Resource
Override
extension allows you to do exactly that:
create a file rule for the url you want to replace
edit the js/css/etc in the extension
reload as often as you want :)
You can even add a tab to the dev tools.