Run Chrome Dev tools commands programatically in console to take node screenshots - google-chrome

I'm looking for a way to programatically take screenshots of multiple HTML nodes on a page.
Under console you can take a screenshot by doing Command + Shift + P > Capture node screenshot.
Does Dev tool have an equivalent command for the same? Something like:
nodes.forEach( ( node ) => Chrome.api.commands.nodeScreenshot( node ) );
where nodes is a NodeList.

Related

Invoking series of commands in a new tab in cmder

TLDR:
I want to use something like -new_console:t:tabname to open a new named tab in cmder and then transfer focus/control to that tab so that the rest of the commands I'm sending from a Python script run in that console instead. Or, I want to rename a cmder tab from a script running in the console.
DETAILS:
I often have to execute a series of commands in cmder in order to test the latest code from our continuous integration environment. Because there are several applications I often have to have running at a time, it would be helpful for me to have the cmder tabs named according to which application they are running.
The only way I've found to set a tab name from within cmder (apart from manually with mouse clicks) is to do so with the -new_console:t:tab_name command. But that only runs the next command in the newly opened tab, and not all the things that come after it.
I kick off all my commands with a Python script that accepts parameters to let me control which application opens and how things behave. I'd like to do something like this:
os.system('pwd "-new-console:t:' + args.app + '"')
so that a new tab opens with the name of the app I'm about to invoke in it, starting with an indication of the present working directory. But then I'd like all the commands that follow from the Python script to be run in this new tab instead of in the tab used to kick off the Python script. This includes printing some flowerboxed comments, but also invoking a local application server that will continue running.
Is there any way to, as you create a new (named) tab in cmder, transfer focus to that tab so that all future commands run in that tab instead of the initiating tab? Alternately, is there any way from within a cmder console to rename the cmder tab it's running in? That would be just as good.
Thanks!
Thanks for looking, but I found the answer.
In the bottom right corner is a hamburger stack. Click on that and select Settings. In General --> Tab bar, change the Console setting from the default %n to %s. Then the "title" command will change the tab name.

Registry error when using Selenium webdriver with Chrome

The error occurs when running the illustrative example of Selenium-Webdriver with the latest Chromedriver executable. Chrome is correctly launched but there's an error in the console.
I am using Windows 10.
run>>regedit>>Chrome.
Computer\HKEY_LOCAL_MACHINE\SOFTWARE\Google\Chrome ::
I am able to get only this path.
HKLM\SOFTWARE\Policies\Google\Chrome:: this path is not availble.
2212:9152:0703/185315.194:ERROR:install_util.cc(589)] Unable to create registry key HKLM\SOFTWARE\Policies\Google\Chrome for reading result=2 [2212:196:0703/185315.598:ERROR:cache_util_win.cc(20)] Unable to move the cache: 5 [2212:196:0703/185315.598:ERROR:cache_util.cc(134)] Unable to move cache folder C:\Users\Anchal\AppData\Local\Google\Chrome\User Data\ShaderCache\GPUCache to C:\Users\Anchal\AppData\Local\Google\Chrome\User Data\ShaderCache\old_GPUCache_000 [2212:196:0703/185315.598:ERROR:disk_cache.cc(169)] Unable to create cache
jarmake posted the solution of this error on github issues:
He made a little tutorial, I'll paste here but if you want the original post, here the source.
Open registry with regedit (just click on Windows start menu and
start typing regedit, it should come up)
From the registry explorer, expand HKEY_LOCAL_MACHINE, and from there
expand SOFTWARE Expand Policies. I was missing everything from this
point.
So what I had to do was to select the Policies by left clicking on
it, and then right click and from the context menu select New > Key
and name it Google. Once that is created, select that and right click
and again select New > Key and name that Chrome.
Select that folder, and right click. Choose New > String. Name it as
MachineLevelUserCloudPolicyEnrollmentToken and leave the value empty.
If you alreade have Google and Chrome under Policies, I think only
adding the key as in step 6 should work. I've attached a picture to
show how it should look like when it's done.
And just as a clarifier. This is under SOFTWARE/Policies, not
directly under SOFTWARE.

How can you export content from your Output in VS Code?

I am utilizing an extension called Azure Event Hub Explorer in Visual Studio Code. The extension allows me to see messages from an Azure Event Hub within the VS Code Output.
There are a lot of messages and you have to scroll through them to find what you want. There is no way to filter the results. I am looking for a way to export the output into something like a csv file so that I can easily filter my results.
Please let me know if there is a way.
Click on "Open log file" button on right upper corner of output window. Also you can canfigure key bindings for commands:

Does chrome dev tools have anything similar to sublime text's snippets and tab triggers?

When I'm writing code in sublime text, I have the ability to create "snippets" that I can "tabtrigger" into my code.
For example, If I'm writing some js code and I want to log something to the console, I created a snippet so that all I have to do is type "log" and hit tab. As soon as I hit tab console.log(); is inserted into my code. Google seems to have a different definition of snippets, and I was wondering if the described functionality is available when writing code directly in the dev tools source panel?
I did not find this Tab trigger ability in Chrome but a way to simmulate this operation:
Using AutoHotKey
Run it after installing , and right click AutoHotKey in the taskbar corner -> Edit This Script
Add the following to the script files.
#IfWinActive Developer Tools -
::ml::
SendInput {Raw}margin-left:10px;
return
write your own script like above, then save it and Reload This Script
Have fun!
More to say:
#IfWinActive means this part only applies to the current window whose name started with Developer Tools - .So if you want this script work, you shoul make the develop window seperated from the main Chrome window to have this window name.
::ml:: defines the keys to trigger, the starting :: means this is a word , which can only trigger when it is followed by a space key or an enter key or a tab key a semicolon key and so on. Otherwise it will soon output margin-left:10px; once you typed ml .
SendInput with {Raw} can avoid triggerring endless loop. eg. bb -> border-bottom:1px solid #bbb; the output is ended with bb; and AutoHotKey will auto minimize the current window to avoid endless loop.

Save the console.log in Chrome to a file

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