Save the console.log in Chrome to a file - google-chrome

Does anyone know of a way to save the console.log output in Chrome to a file? Or how to copy the text out of the console?
Say you are running a few hours of functional tests and you've got thousands of lines of console.log output in Chrome. How do you save it or export it?

Good news
Chrome dev tools now allows you to save the console output to a file natively
Open the console
Right-click
Select "save as.."
Chrome Developer instructions here.

I needed to do the same thing and this is the solution I found:
Enable logging from the command line using the flags:
--enable-logging --v=1
This logs everything Chrome does internally, but it also logs all the console.log() messages as well. The log file is called chrome_debug.log and is located in the User Data Directory which can be overridden by supplying --user-data-dir=PATH (more info here).
Filter the log file you get for lines with CONSOLE(\d+).
Note that console logs do not appear with --incognito.

I have found a great and easy way for this.
In the console - right click on the console logged object
Click on 'Store as global variable'
See the name of the new variable - e.g. it is variableName1
Type in the console: JSON.stringify(variableName1)
Copy the variable string content: e.g. {"a":1,"b":2,"c":3}
Go to some JSON online editor:
e.g. https://jsoneditoronline.org/

There is an open-source javascript plugin that does just that, but for any browser - debugout.js
Debugout.js records and save console.logs so your application can access them. Full disclosure, I wrote it. It formats different types appropriately, can handle nested objects and arrays, and can optionally put a timestamp next to each log. You can also toggle live-logging in one place, and without having to remove all your logging statements.

For better log file (without the Chrome-debug nonsense) use:
--enable-logging --log-level=0
instead of
--v=1 which is just too much info.
It will still provide the errors and warnings like you would typically see in the Chrome console.
update May 18, 2020: Actually, I think this is no longer true. I couldn't find the console messages within whatever this logging level is.

This may or may not be helpful but on Windows you can read the console log using Event Tracing for Windows
http://msdn.microsoft.com/en-us/library/ms751538.aspx
Our integration tests are run in .NET so I use this method to add the console log to our test output. I've made a sample console project to demonstrate here: https://github.com/jkells/chrome-trace
--enable-logging --v=1 doesn't seem to work on the latest version of Chrome.

For Google Chrome Version 84.0.4147.105 and higher,
just right click and click 'Save as' and 'Save'
then, txt file will be saved

A lot of good answers but why not just use JSON.stringify(your_variable) ? Then take the contents via copy and paste (remove outer quotes). I posted this same answer also at: How to save the output of a console.log(object) to a file?

There is another open-source tool which allows you to save all console.log output in a file on your server - JS LogFlush (plug!).
JS LogFlush is an integrated JavaScript logging solution which include:
cross-browser UI-less replacement of console.log - on client side.
log storage system - on server side.
Demo

If you're running an Apache server on your localhost (don't do this on a production server), you can also post the results to a script instead of writing it to console.
So instead of console.log, you can write:
JSONP('http://localhost/save.php', {fn: 'filename.txt', data: json});
Then save.php can do this
<?php
$fn = $_REQUEST['fn'];
$data = $_REQUEST['data'];
file_put_contents("path/$fn", $data);

Right-click directly on the logged value you want to copy
In the right-click menu, select "Store as global variable"
You'll see the value saved as something like "temp1" on the next line in the console
In the console, type copy(temp1) and hit return (replace temp1 with the variable name from the previous step). Now the logged value is copied to your clipboard.
Paste the values to wherever you want
This is especially good as an approach if you don't want to mess with changing flags/settings in Chrome and don't want to deal with JSON stringifying and parsing etc.
Update: I just found this explanation of what I suggested with images that's easier to follow https://scottwhittaker.net/chrome-devtools/2016/02/29/chrome-devtools-copy-object.html

These days it's very easy - right click any item displayed in the console log and select save as and save the whole log output to a file on your computer.

On Linux (at least) you can set CHROME_LOG_FILE in the environment to have chrome write a log of the Console activity to the named file each time it runs. The log is overwritten every time chrome starts. This way, if you have an automated session that runs chrome, you don't have a to change the way chrome is started, and the log is there after the session ends.
export CHROME_LOG_FILE=chrome.log

the other solutions in this thread weren't working on my mac. Here's a logger that saves a string representation intermittently using ajax. use it with console.save instead of console.log
var logFileString="";
var maxLogLength=1024*128;
console.save=function(){
var logArgs={};
for(var i=0; i<arguments.length; i++) logArgs['arg'+i]=arguments[i];
console.log(logArgs);
// keep a string representation of every log
logFileString+=JSON.stringify(logArgs,null,2)+'\n';
// save the string representation when it gets big
if(logFileString.length>maxLogLength){
// send a copy in case race conditions change it mid-save
saveLog(logFileString);
logFileString="";
}
};
depending on what you need, you can save that string or just console.log it and copy and paste. here's an ajax for you in case you want to save it:
function saveLog(data){
// do some ajax stuff with data.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200) {}
}
xhttp.open("POST", 'saveLog.php', true);
xhttp.send(data);
}
the saveLog.php should append the data to a log file somewhere. I didn't need that part so I'm not including it here. :)
https://www.google.com/search?q=php+append+to+log

This answer might seem specifically related, but specifically for Network Log, you can visit the following link.
The reason I've post this answer is because in my case, the console.log printed a long truncated text so I couldn't get the value from the console. I solved by getting the api response I was printing directly from the network log.
chrome://net-export/
There you may see a similar windows to this, just press the Start Logging to Disk button and that's it:

Create a batch file using below command and save it as ChromeDebug.bat in your desktop.
start chrome --enable-logging --v=1
Close all other Chrome tabs and windows.
Double click ChromeDebug.bat file which will open Chrome and a command prompt with Chrome icon in taskbar.
All the web application logs will be stored in below path.
Run the below path in Run command to open chrome log file
%LocalAppData%\Google\Chrome\User Data\chrome_debug.log

Related

PHPstorm console input not working during debug sessions

I'm using a PHP script which expects user input from a command like fgets(STDIN). The problem is it no longer works in the newest version of PHPStorm (10).
The same works when I run it directly (without debugger enabled) and anything I enter in the console is sent to the script (on direct run).
But during a debug session, when I try to input text at the script's prompt, it does not go to the script. My best guess is that the new REPL feature is overriding user input in console during debugging. I say this because pressing the UP/DOWN arrows opens up a popup with all PHP function names.
It used to work correctly with last version.
How can I send user input to my PHP script with this new version? Am I missing something here?
I'm not sure if this is the same thing, but I was running into this same problem, and I was able to get it working by deselecting the "Use Console Input" checkbox in the PHPStorm Console.
John's answer is perfect.
I want to mention that the Use Console Input is a tiny icon in sidebar of the debug console. I provide you by this image

Open a Tcl file with Wish Application

I'm running Windows 8. I have a file named "test.tcl".
If I open a shell, type "wish", then 2 windows open. In one of them, I can type Tcl code and open the file test.tcl. If I open this file, its code is executed.
If I double click on test.tcl to open the file with "Wish Application", then 1 blank window open, and nothing happens.
Do you know why please?
On Windows, Wish is built as a GUI-only application; it has no real standard output available. Tk fakes one for you though; just put this in your script to show the fake console:
console show
The fake console shows up by default when you launch without a script file, but launching with a script file doesn't show it (so your script file can implement an application, of course).
This can catch people out when they produce a lot of output on stdout. Tk may well be keeping it all faithfully just in case the code does console show later on, though it looks and smells a lot like a memory leak if you're not prepared for it…

Using --js-flags in Google Chrome to get --trace output

I've looked through various sources online and done a number of Google searches, but I can't seem to find any specific instructions as to how to work with the V8 --trace-* flags in Google Chrome. I've seen a few "You can do this as well in Chrome", but I haven't been able to find what I'm looking for, which is output like this: (snippets are near the near bottom of the post) Optomizing for V8.
I found reference that the data is logged to a file: Profiling Chromium with V8 and I've found that the file is likely named v8.log: (Lost that link) but I haven't found any clues as to how to generate that file, or where it is located. It didn't appear to be in the chrome directory or the user directory.
Apparently I need to enable .map files for chrome.dll as well, but I wasn't able to find anything to help me with that.
The reason I would prefer to use Chrome's V8 for this as opposed to building V8 and using a shell is because the JavaScript I would like to test makes use of DOM, which I do not believe would be included in the V8 shell. However if it is, that would be great to know, then I can rewrite the code to work sans-html file and test. But my guess is that V8 by itself is sans-DOM access, like node.js
So to sum things up;
Running Google Chrome Canary on Windows 7 ultimate x64
Shortcut target is "C:\Users\ArkahnX\AppData\Local\Google\Chrome SxS\Application\chrome.exe" --no-sandbox --js-flags="--trace-opt --trace-bailout --trace-deop" --user-data-dir=C:\chromeDebugProfile
Looking for whether this type of output can be logged from chrome
If so, where would the log be?
If not, what sort of output should I expect, and again, where could I find it?
Thank you for any assistance!
Amending with how I got the answer to work for me
Using the below answer, I installed python to it's default directory, and modified the script so it had the full path to chrome. From there I set file type associations to .py files to python and executed the script. Now every time I open Chrome Canary it will run that python script (at least until I restart my pc, then I'll have to run that script again)
The result is exactly what I was looking for!
On Windows stdout output is suppressed by the fact that chrome.exe is a GUI application. You need to flip Subsystem field in the PE header from IMAGE_SUBSYSTEM_WINDOWS_GUI to WINDOWS_SUBSYSTEM_WINDOWS_CUI to see what V8 outputs to stdout.
You can do it with the following (somewhat hackish) Python script:
import mmap
import ctypes
GUI = 2
CUI = 3
with open("chrome.exe", "r+b") as f:
map = mmap.mmap(f.fileno(), 1024, None, mmap.ACCESS_WRITE)
e_lfanew = (ctypes.c_uint.from_buffer(map, 30 * 2).value)
subsystem = ctypes.c_ushort.from_buffer(map, e_lfanew + 4 + 20 + (17 * 4))
if subsystem.value == GUI:
subsystem.value = CUI
print "patched: gui -> cui"
elif subsystem.value == CUI:
subsystem.value = GUI
print "patched: cui -> gui"
else:
print "unknown subsystem: %x" % (subsystem.value)
Close all Chrome instances and execute this script. When you restart chrome.exe you should see console window appear and you should be able to redirect stdout via >.
If your not keen on hacking the PE entry of chrome then there is alternative for windows.
Because the chrome app doesn't create a console stdout on windows all tracing in v8 (also d8 compiler) is sent to the OutputDebugString instead.
The OutputDebugString writes to a shared memory object that can be read by any other application.
Microsoft has a tool called DebugView which monitors and if required also stream to a log file.
DebugView is free and downloadable from microsoft: http://technet.microsoft.com/en-us/sysinternals/bb896647.aspx

FlexPMD Violations Viewer - how to view results directly

So I started using FlexPMD for static code analysis, and I want to add it to my team's build process. I have it running nicely from a shell script, and can view the results by clicking a button and uploading the desired (pmd.xml) output file in the Violations Viewer that comes with it (note there is also one online here: http://opensource.adobe.com/svn/opensource/flexpmd/bin/flex-pmd-violations-viewer.html).
But I'd like to view the results directly without having to take the extra step of clicking the upload button. I imagine there is some black magic URL parameter that works, but (if so) what is it? This site:
http://blogs.adobe.com/xagnetti/2009/09/load_pmd_results_directly_in_t.html
mentions referencing pmd.xml with a "report" URL param, like so:
http://opensource.adobe.com/svn/opensource/flexpmd/bin/flex-pmd-violations-viewer.html?report=path/to/my/pmd.xml
but it's not working for me. Has anyone encountered this problem and triumphed, by chance?
EDIT: More info...
The latter (opensource.adobe.com...) webpage has the following JavaScript:
function getReport()
{
if ( window.location.href.indexOf('=') == -1 )
{
return "";
}
var hashes = window.location.href.slice(window.location.href.indexOf('=') + 1);
return hashes;
}
var report = getReport();
which it passes into flashvars. Perhaps the format with which I'm passing pmd.xml is incorrect?
Okay, figured it out. The version of the violations viewer that ships with the open source FlexPMD does not allow for automatic viewing of reports (the HTML wrapper doesn't pass in the report filepath, and the SWF doesn't take it in). The solution that worked for me was to download the files from the online violations viewer here:
http://opensource.adobe.com/svn/opensource/flexpmd/bin/flex-pmd-violations-viewer.html?report=path/to/my/pmd.xml
by using your browser to just save the webpage, and then curl to save the SWF file (directly trying to save from the browser will not work - appears to redirect to a null address) to like so:
curl -O http://opensource.adobe.com/svn/opensource/flexpmd/bin/flex-pmd-violations-viewer-1.1.swf
and place in the same directory as the violations viewer html file you downloaded. Then you can read your reports automatically! Here is an example (absolute filepath on Mac):
file:///path/to/your/violations-viewer/ViolationsViewer.html?report=/Users/joverton/some/project/path/bin-debug/pmd_reports/pmd.xml

How can I read Chrome Cache files?

A forum I frequent was down today, and upon restoration, I discovered that the last two days of forum posting had been rolled back completely.
Needless to say, I'd like to get back what data I can from the forum loss, and I am hoping I have at least some of it stored in the cache files that Chrome created.
I face two problems -- the cache files have no filetype, and I'm unsure how to read them in an intelligent manner (trying to open them in Chrome itself seems to "redownload" them in a .gz format), and there are a ton of cache files.
Any suggestions on how to read and sort these files? (A simple string search should fit my needs)
EDIT: The below answer no longer works see here
In Chrome or Opera, open a new tab and navigate to chrome://view-http-cache/
Click on whichever file you want to view.
You should then see a page with a bunch of text and numbers.
Copy all the text on that page.
Paste it in the text box below.
Press "Go".
The cached data will appear in the Results section below.
Try Chrome Cache View from NirSoft (free).
EDIT: The below answer no longer works see here
Chrome stores the cache as a hex dump. OSX comes with xxd installed, which is a command line tool for converting hex dumps. I managed to recover a jpg from my Chrome's HTTP cache on OSX using these steps:
Goto: chrome://cache
Find the file you want to recover and click on it's link.
Copy the 4th section to your clipboard. This is the content of the file.
Follow the steps on this gist to pipe your clipboard into the python script which in turn pipes to xxd to rebuild the file from the hex dump:
https://gist.github.com/andychase/6513075
Your final command should look like:
pbpaste | python chrome_xxd.py | xxd -r - image.jpg
If you're unsure what section of Chrome's cache output is the content hex dump take a look at this page for a good guide:
http://www.sparxeng.com/blog/wp-content/uploads/2013/03/chrome_cache_html_report.png
Image source: http://www.sparxeng.com/blog/software/recovering-images-from-google-chrome-browser-cache
More info on XXD: http://linuxcommand.org/man_pages/xxd1.html
Thanks to Mathias Bynens above for sending me in the right direction.
EDIT: The below answer no longer works see here
If the file you try to recover has Content-Encoding: gzip in the header section, and you are using linux (or as in my case, you have Cygwin installed) you can do the following:
visit chrome://view-http-cache/ and click the page you want to recover
copy the last (fourth) section of the page verbatim to a text file (say: a.txt)
xxd -r a.txt| gzip -d
Note that other answers suggest passing -p option to xxd - I had troubles with that presumably because the fourth section of the cache is not in the "postscript plain hexdump style" but in a "default style".
It also does not seem necessary to replace double spaces with a single space, as chrome_xxd.py is doing (in case it is necessary you can use sed 's/ / /g' for that).
Note: The flag show-saved-copy has been removed and the below answer will not work
You can read cached files using Chrome alone.
Chrome has a feature called Show Saved Copy Button:
Show Saved Copy Button Mac, Windows, Linux, Chrome OS, Android
When a page fails to load, if a stale copy of the page exists in the browser cache, a button will be presented to allow the user to load that stale copy. The primary enabling choice puts the button in the most salient position on the error page; the secondary enabling choice puts it secondary to the reload button. #show-saved-copy
First disconnect from the Internet to make sure that browser doesn't overwrite cache entry. Then navigate to chrome://flags/#show-saved-copy and set flag value to Enable: Primary. After you restart browser Show Saved Copy Button will be enabled. Now insert cached file URI into browser's address bar and hit enter. Chrome will display There is no Internet connection page alongside with Show saved copy button:
After you hit the button browser will display cached file.
I've made short stupid script which extracts JPG and PNG files:
#!/usr/bin/php
<?php
$dir="/home/user/.cache/chromium/Default/Cache/";//Chrome or chromium cache folder.
$ppl="/home/user/Desktop/temporary/"; // Place for extracted files
$list=scandir($dir);
foreach ($list as $filename)
{
if (is_file($dir.$filename))
{
$cont=file_get_contents($dir.$filename);
if (strstr($cont,'JFIF'))
{
echo ($filename." JPEG \n");
$start=(strpos($cont,"JFIF",0)-6);
$end=strpos($cont,"HTTP/1.1 200 OK",0);
$cont=substr($cont,$start,$end-6);
$wholename=$ppl.$filename.".jpg";
file_put_contents($wholename,$cont);
echo("Saving :".$wholename." \n" );
}
elseif (strstr($cont,"\211PNG"))
{
echo ($filename." PNG \n");
$start=(strpos($cont,"PNG",0)-1);
$end=strpos($cont,"HTTP/1.1 200 OK",0);
$cont=substr($cont,$start,$end-1);
$wholename=$ppl.$filename.".png";
file_put_contents($wholename,$cont);
echo("Saving :".$wholename." \n" );
}
else
{
echo ($filename." UNKNOWN \n");
}
}
}
?>
I had some luck with this open-source Python project, seemingly inactive:
https://github.com/JRBANCEL/Chromagnon
I ran:
python2 Chromagnon/chromagnonCache.py path/to/Chrome/Cache -o browsable_cache/
And I got a locally-browsable extract of all my open tabs cache.
The Google Chrome cache directory $HOME/.cache/google-chrome/Default/Cache on Linux contains one file per cache entry named <16 char hex>_0 in "simple entry format":
20 Byte SimpleFileHeader
key (i.e. the URI)
payload (the raw file content i.e. the PDF in our case)
SimpleFileEOF record
HTTP headers
SHA256 of the key (optional)
SimpleFileEOF record
If you know the URI of the file you're looking for it should be easy to find. If not, a substring like the domain name, should help narrow it down. Search for URI in your cache like this:
fgrep -Rl '<URI>' $HOME/.cache/google-chrome/Default/Cache
Note: If you're not using the default Chrome profile, replace Default with the profile name, e.g. Profile 1.
It was removed on purpose and it won't be coming back.
Both chrome://cache and chrome://view-http-cache have been removed starting chrome 66. They work in version 65.
Workaround
You can check the chrome://chrome-urls/ for complete list of internal Chrome URLs.
The only workaround that comes into my mind is to use menu/more tools/developer tools and having a Network tab selected.
The reason why it was removed is this bug:
https://chromium.googlesource.com/chromium/src.git/+/6ebc11f6f6d112e4cca5251d4c0203e18cd79adc
https://bugs.chromium.org/p/chromium/issues/detail?id=811956
The discussion:
https://groups.google.com/a/chromium.org/forum/#!msg/net-dev/YNct7Nk6bd8/ODeGPq6KAAAJ
The JPEXS Free Flash Decompiler has Java code to do this at in the source tree for both Chrome and Firefox (no support for Firefox's more recent cache2 though).
EDIT: The below answer no longer works see here
Google Chrome cache file format description.
Cache files list, see URLs (copy and paste to your browser address bar):
chrome://cache/
chrome://view-http-cache/
Cache folder in Linux: $~/.cache/google-chrome/Default/Cache
Let's determine in file GZIP encoding:
$ head f84358af102b1064_0 | hexdump -C | grep --before-context=100 --after-context=5 "1f 8b 08"
Extract Chrome cache file by one line on PHP (without header, CRC32 and ISIZE block):
$ php -r "echo gzinflate(substr(strchr(file_get_contents('f84358af102b1064_0'), \"\x1f\x8b\x08\"), 10,
-8));"
Note: The below answer is out of date since the Chrome disk cache format has changed.
Joachim Metz provides some documentation of the Chrome cache file format with references to further information.
For my use case, I only needed a list of cached URLs and their respective timestamps. I wrote a Python script to get these by parsing the data_* files under C:\Users\me\AppData\Local\Google\Chrome\User Data\Default\Cache\:
import datetime
with open('data_1', 'rb') as datafile:
data = datafile.read()
for ptr in range(len(data)):
fourBytes = data[ptr : ptr + 4]
if fourBytes == b'http':
# Found the string 'http'. Hopefully this is a Cache Entry
endUrl = data.index(b'\x00', ptr)
urlBytes = data[ptr : endUrl]
try:
url = urlBytes.decode('utf-8')
except:
continue
# Extract the corresponding timestamp
try:
timeBytes = data[ptr - 72 : ptr - 64]
timeInt = int.from_bytes(timeBytes, byteorder='little')
secondsSince1601 = timeInt / 1000000
jan1601 = datetime.datetime(1601, 1, 1, 0, 0, 0)
timeStamp = jan1601 + datetime.timedelta(seconds=secondsSince1601)
except:
continue
print('{} {}'.format(str(timeStamp)[:19], url))