Save the console.log in Chrome to a file

Google ChromeConsoleLogging

Google Chrome Problem Overview


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?

Google Chrome Solutions


Solution 1 - Google Chrome

Good news

Chrome dev tools now allows you to save the console output to a file natively

  1. Open the console
  2. Right-click
  3. Select "save as.."

save console to file

Chrome Developer instructions here.

Solution 2 - Google Chrome

I needed to do the same thing and this is the solution I found:

  1. 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).

  1. Filter the log file you get for lines with CONSOLE(\d+).

Note that console logs do not appear with --incognito.

Solution 3 - Google Chrome

I have found a great and easy way for this.

  1. In the console - right click on the console logged object

  2. Click on 'Store as global variable'

  3. See the name of the new variable - e.g. it is variableName1

  4. Type in the console: JSON.stringify(variableName1)

  5. Copy the variable string content: e.g. {"a":1,"b":2,"c":3}

enter image description here

  1. Go to some JSON online editor: e.g. https://jsoneditoronline.org/

enter image description here

Solution 4 - Google Chrome

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.

Solution 5 - Google Chrome

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.

Solution 6 - Google Chrome

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.

Solution 7 - Google 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

enter image description here

Solution 8 - Google Chrome

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: https://stackoverflow.com/questions/11849562/how-to-save-the-output-of-a-console-logobject-to-a-file#new-answer

Solution 9 - Google Chrome

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

Solution 10 - Google Chrome

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);

Solution 11 - Google Chrome

  1. Right-click directly on the logged value you want to copy
  2. In the right-click menu, select "Store as global variable"
  3. You'll see the value saved as something like "temp1" on the next line in the console
  4. 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.
  5. 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

Solution 12 - Google Chrome

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

Solution 13 - Google Chrome

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.

Solution 14 - Google Chrome

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

Solution 15 - Google Chrome

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:

enter image description here

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestioneeejayView Question on Stackoverflow
Solution 1 - Google ChromeadardesignView Answer on Stackoverflow
Solution 2 - Google ChromeWaleed AbdullaView Answer on Stackoverflow
Solution 3 - Google ChromeCombineView Answer on Stackoverflow
Solution 4 - Google ChromeinorganikView Answer on Stackoverflow
Solution 5 - Google ChromeJohnP2View Answer on Stackoverflow
Solution 6 - Google ChromeJared KellsView Answer on Stackoverflow
Solution 7 - Google ChromeEdsel AyalaView Answer on Stackoverflow
Solution 8 - Google Chromeuser1889992View Answer on Stackoverflow
Solution 9 - Google ChromehindmostView Answer on Stackoverflow
Solution 10 - Google ChromesupersanView Answer on Stackoverflow
Solution 11 - Google ChromeepanView Answer on Stackoverflow
Solution 12 - Google ChromeDrChandraView Answer on Stackoverflow
Solution 13 - Google ChromebrianlmerrittView Answer on Stackoverflow
Solution 14 - Google ChromeSymbolicView Answer on Stackoverflow
Solution 15 - Google Chromeluiscla27View Answer on Stackoverflow