I am debugging a Chrome extension off github. (https://github.com/artemave/translate_onhover)
I want to see the debug() messages that are in the code: like this one...
--------From contentscript.js------------
const hit_text_node = getExactTextNode(text_nodes, e)
if (!hit_text_node) {
debug('hit between lines')
return ''
}
I have tried:
In Chrome on a web page, I tried right-click verbose, but they don't appear.
I do see console.log('jim103',word) from devtools from chrome://extensions background.js
I also tried putting the word
debugger;
in both files, but it just caused a breakpoint in background.js, not the debug message I seek...
I know these two files are back/front separated... That's all I know.
JavaScript does not have a built-in function called debug, which tells us that it's a custom one. We could also figure it out by trying to step-into that function during debugging (with F11 key). This leads us to trying to find its definition – and it's at the top of the file: const debug = require('debug')('transover'). The fact that the argument of require here is not a path, but just a name, tells us that this is a package – go to package.json and there it is: "debug": "^4.1.1". By default, NPM packages are downloaded from npmjs.com, let's head there and find the package – https://www.npmjs.com/package/debug. Its docs tell us that in the browser environment its behaviour is controlled by localStorage https://www.npmjs.com/package/debug#browser-support. So all you have to do is type localStorage.debug = 'transover*' In the console for a particular site and reload the page. Debug messages will start appearing in the console.
-В Иванов
There are two outputs, back/front background.js comes out in DevTools, but front=contentscript.js:debug() stuff comes out on the page.
Do right-click->Inspect and look on the right side.
I'm trying to implement the onEdit(e) simple trigger of Google Sheets. Everytime I try execute even a simple function such as:
function onEdit(e){
Logger.log(e.oldValue);
}
I get the following error:
My step by step:
I've tried following these two videos with no success:
https://www.youtube.com/watch?v=eWn_JxPSbds
https://www.youtube.com/watch?v=L1_nIhiVc5M
EDIT: SOLUTION
Thanks to #JPV and #TheMaster for the two potential solutions:
I was viewing the "Logs" and not the "Stackdriver Logging".
It seems you need to disable the V8 to view it in Logs, but need the Stackdriver Logging to view it with V8.
At least that seems to be the case with me
EDIT TWO
Here's the documentation where the issue is addressed:
https://developers.google.com/apps-script/guides/v8-runtime#ui_changes_for_logging
"If your script uses the Rhino runtime, selecting View > Logs in the Apps Script editor only shows you recent logs written by the Logger service. You must select View > Stackdriver Logging to see logs written with the console class."
Nothing is wrong with V8. That error is because you ran the script directly by clicking run button before. That caused the error and was logged. When you edit, it is logged to view>stackdriver logging. But the previous error is shown to you. You're looking at old logs.
As per the official documentation,
For scripts using the V8 runtime, the script editor View > Logs menu item shows both Logger and console results for the most recent execution in the current session
Only current session logs is available to View>Logs. To access previous session logs or logs logged not by running a function directly in the current session, use View > Stackdriver Logging
....
This seems to be a glitch in the new V8 engine. Disabling V8 should fix it. Let's hope this will be fixed soon.
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
I want to make a dev tools Chrome extension that lets the user go to specific points in the page's source code (whenever the page's source code calls some global function foo that I inject into the page via an extension content script).
I can get a stack trace by having function foo throw an exception and then catch it.
But how can I tell Chrome dev tools to go navigate to a certain line in the source code? Is there an API call for that?
There's an API function just for that, chrome.devtools.panels.openResource.
Note that line numbers are zero-based for this API.
// Opens line 34 of file https://example.com/test.js, assuming this resource is present:
chrome.devtools.panels.openResource("https://example.com/test.js", 33, function() {
// Resource should be open, but no way to test that it succeeded
});
I am a web scraping newbie. I have identified a JS function on a server, whose I/O I need to track. It's an obscured encryption function, and I need to know what values it takes for input and what it outputs. How can I get this done?
So far, I've opened up the web page in firebug, identified where the function is called and then set a breakpoint. However, when I refresh the page and clear my cache, the browser ignores my breakpoint and loads the page as if there were no breakpoints on it.
You can use console.log in your function to load data to console. But it's better to use it any debug state:
if (app.debug) {
console.log(data)
}
Where app for example is your namespace, debug is flag for logging and data is your function/application data.
More info about console.
About clear cache: Firebug and Chrome Dev Tools remove all breakpoints from file if file was changed.