Can anyone tell me how the Chrome developer tools workspace mappings work.
I believe it is only available in Canary at the moment.
I thought it is supposed to allow me to make changes to the CSS rules in the elements view and have them automatically saved to the local files as demonstrated by Paul Irish at Google IO 2013. I can't get this functionality to work.
https://developers.google.com/events/io/sessions/325206725
It works only in canary at the moment.
EDIT: Now in Chrome (since ver 30+)
1) you need to open devtools settings panel. It has 'Workspace' section.
2) in this section you need to click on 'Add folder' item. It will show folder selection dialog.
3) After selecting a folder you will see an info bar about access rights for the folder.
4) As a result you will see two top level elements in the Source panel file selector pane. In my case it were localhost:9080 site and devtools local file system folder. At this moment you need to create a mapping between site files and your local files. You can do that via context menu on a file.
It doesn't matter what file to map, local or site file.
5) at that moment devtools will ask you about restart.
After restart devtools will show you the singe folder entry in the files pane and will apply all the changes you do to the local file each time when you press Ctrl + S or Cmd + S on mac.
Just a correction on what loislo has said.
"It works only in canary at the moment."
You can trigger all these experimental features in stable chrome releases by typing
Chrome://flags in the address bar.
Can anyone tell me how the Chrome developer tools workspace mappings work?
In current version of Chrome (I have version 80) the manual mapping option is gone. In the DevTools under Settings > Workspace it only says "Mappings are inferred automatically". From what I found the automatic mapping considers the following characteristics:
(1) Resource name and file name must be equal.
(2) Resource content and file content must be equal.
(3) The header field "Last-Modified" of the resource must be equal to the last modification date of the file on the file system.
Note that for (2) also the encoding must be the same. For example mixing "UTF-8" and "UTF-8 with BOM" will not work.
(3) Was not true in my case because I served the resource using a custom HttpServlet (Java), in which this header field was not set. Now I set this header field in my HttpServlet and the workspace mapping in Chrome is working. Simplified example:
#Override
protected void doProcess(HttpServletRequest httpRequest, HttpServletResponse httpResponse) throws IOException
{
try
{
// (1) file_name must be equal to the queried resource name of the website.
String path = "path/to/the/file_name.js";
File file = new File(path);
httpResponse.setContentType("application/javascript");
// (3) the Last-Modified header field of the resource must match the file's last modified date
httpResponse.setDateHeader("Last-Modified", file.lastModified());
// (2) the content of the resource must match the content of the file
// Note: CopyStream is a utility class not part of standard Java. But you get the idea ;)
CopyStream.copyAll(new FileInputStream(path), httpResponse.getOutputStream());
}
catch (Exception ex)
{
ex.printStackTrace();
}
}
For me I just needed to update Chrome (there was a light red "update" button that I'd been ignoring for some time).
Related
I have the newest version of PhpStorm.
Previously I worked with Eclipse and had the opportunity to see my whole workspace. In PhpStorm I need to open one instance per project.
In my daily workflow I need to search for strings in my workspace. In
PhpStorm I would need to switch from instance to instance and need to execute the string search again and again per instance.
Is there another solution or do I really need to execute my search multiple times?
In addition eclipse had the "Open Resource" function for the whole workspace. Does PhpStorm offers the Open Resource for whole workspace too?
In PhpStorm I need to open one instance per project.
That's correct -- currently having more than one project in one frame is not supported.
https://youtrack.jetbrains.com/issue/WI-15187 -- watch this ticket (star/vote/comment) to get notified on progress.
Is there another solution or do I really need to execute my search multiple times?
You can always attach any folder (from any project) to current project as Additional Content Root (will be listed as separate branch in Project View panel).
Settings (Preferences on Mac) | Project | Directories --> "Add Content Root" button.
Note that it will still be treated as one project (no separate settings) -- additional content root is treated as just a bunch of files/folders.
In addition eclipse had the "Open Resource" function for the whole workspace. Does PhpStorm offers the Open Resource for whole workspace too?
Look for commands under Navigate menu.
Navigate | File... Ctrl + Shift + N (using Default keymap) is
most likely what you need.
Useful info:
https://confluence.jetbrains.com/display/PhpStorm/PhpStorm+for+Users+of+Eclipse+PDT+and+Eclipse-based+IDEs
PhpStorm has separate keymap that similar to what Eclipse uses.
How do I enable Server Side Includes for html file hosted on IIS 8.5? Like:
<!--#include virtual="filename.htm"-->
Currently, I don't see include file (html) content when I open page in browser.
Edit: I manually added module mapping of ServerSideIncludeModule for website & still doesn't work.
You have the correct module mapping handler.
When you add the module mapping under Handler Mapping in IIS 8.5 double check that you specify *.html as the file type; don't forget the asterisk (the *). I had added it only as .html, and that won't work.
Also, when you add the module mapping, make sure you click on the "Request Restrictions..." button; on the Mapping tab for restrictions, the checkbox for "Invoke handler only if request is mapped to:" should be checked, and the selection should be set to File. More importantly, on the Verbs tab for the restriction, make sure that the lower dot is selected for "One of the following verbs:" and in the field below you should have "GET, HEAD, POST". Lastly, on the Access tab you should have "Script" selected.
Lastly, if you haven't done the appcmd.exe to set ssiDisable to false, you'll need to run this at at command prompt (run the command prompt as Admin).
cd %windir%\system32\inetsrv
appcmd.exe set config "Name_of_website_as_it_appears_in_IIS_Manager" -section:system.webServer/serverSideInclude /ssiExecDisable:"False" /commit:apphost
Where does GM_setValue store the data to in chrome. I've tried to determine where the data is going but couldn't figure it out. I monitored with process monitor and saw that when I stored a value chrome was updating a chrome_iwoeoiifoi2h3iofhufsdfnvdf type of file and I opened that up with an sqlite browser but the data was not there. I've looked at all the recently modified files trying to find the data but could not find it.
Latest chrome/TM.
In Tampermonkey, GM_setValue() data is stored in a LevelDB database that can be found in the User Data Directory tree.
Once in Chrome's "User Data Directory" (EG: C:\Users\USER_JOE\AppData\Local\Google\Chrome\User Data\Default\),
navigate to the Local Extension Settings\dhdgffkkebhmkfjojejmpbldmpobfkfo folder.
(gcalenpjmijncebpfijmoaglllgpjagf for the Tampermonkey Beta.)
There you will find a LevelDB database, usually named CURRENT. You can manipulate it with tools like LevelDB JSON, but external support for LevelDB currently appears to be spotty and I did not find any working tools for Windows yet (might have to compile your own).
You can also use the Chrome Storage Area Explorer extension to explore the data.
As of Tampermonkey 4.3.6, you can see an individual script's data with the Storage tab in the built-in script editor: (if the 'Storage' tab is not visible, edit Tampermonkey Settings > General Config mode > Advanced)
OLD, Pre November-ish 2015:
Before, about November 2015, data was stored in a Web SQL database in databases\chrome-extension_dhdgffkkebhmkfjojejmpbldmpobfkfo_0.
Once you have navigated to the correct folder, you will typically see two files. On my machine, they are currently just named 4 and 6. These are both SQLite files (the backend for Chrome's Web SQL implementation) and can be inspected with a SQLite viewer/utility.
The (normally) larger file, 6 on my machine, is a somewhat disturbing list of 94-thousand userscripts! I'm not sure what purpose it serves, but haven't investigated it much.
The smaller file (initially, at least), 4 on my machine, is where all the information about/for your userscripts is kept. This includes any data set by GM_setValue().
For example, if I install and run this userscript:
// ==UserScript==
// #name _GM_setValue demo
// #match https://stackoverflow.com/questions/*
// #grant GM_setValue
// ==/UserScript==
GM_setValue ('foo', 'bar');
And then I inspect the `config` table in file `4`, I will see four entries like this:
[![DB entries for sample script][8]][8]
The one you want is the `#st` row. Notice how it has the `GM_setValue` data encoded? :
I'm working in a project which involves using IndexedDB.
As I'm begining to know this technology, I need to be able to delete an indexedDB by hand so I can start over.
I found the way to do it in Firefox, but I can't find the way for Google Chrome.
I tried deleting the content of this folder (I'm using Mac):
{home}/Library/Application Support/Google/Chrome/Default/IndexedDB
but it seems Chrome stil have the DB anywhere so I can't start over.
I've had success running the following in Chrome:
indexedDB.deleteDatabase('DB NAME')
In theory, all you need to do to delete an IndexedDB in Chrome is:
In Chrome, go to Options > Under the Hood > Content Settings > All cookies and Site Data > find the domain where you created the IndexedDB
Hit either the "X" or click "Indexed Database" > Remove
In Windows, the file is located here:
%USERPROFILE%\AppData\Local\Google\Chrome\User Data\Default\IndexedDB
On Mac, do the following:
In Chrome, go to "Settings" (or "Preferences" under the Chrome menu)
Click "show advanced settings" (at the bottom of the page)
Go to "Privacy" > "Content Settings" > "All cookies and Site Data" > find the domain where you created the IndexedDB
Hit either the "X" or click "Indexed Database" > Remove
On Mac, the folder is located here:
/Users/[USERNAME]/Library/Application Support/Google/Chrome/Default/IndexedDB/
On Linux, the folder is located at:
/home/[USERNAME]/.config/google-chrome/Default/IndexedDB/
Alternarive is to do it in the developers console, using this command:
indexedDB.deleteDatabase("databaseName")
In Chrome webkit you can use webkitGetDatabaseNames which returns all database names
With this code, you can delete all local indexedDB:
window.indexedDB.webkitGetDatabaseNames().onsuccess = function(sender,args)
{
var r = sender.target.result;
for(var i in r)
indexedDB.deleteDatabase(r[i]);
};
To remove all Chrome IndexedDB databases run the following in OSX terminal emulator.
rm -rf ${HOME}/Library/Application\ Support/Google/Chrome/Default/IndexedDB/*
Now restart your browser and that's it.
Because I need to purge IndexedDB databases very often, I have set up an alias in my ~./bash_profile.
alias purge-idb="rm -rf ${HOME}/Library/Application\ Support/Google/Chrome/Default/IndexedDB/*"
Chrome -> Inspector Window -> Application -> look at left hand menu -> Storage -> IndexedDB
You have to be on your application's page though. Also I think Safari expires IDB data after 7 days or something.
write this code segment in console
window.indexedDB.deleteDatabase(<your db name>)
To delete an IndexedDB from the OS X version of Chrome:
1) In Preferences, show Advanced Settings then click the "Content Settings" button under the "Privacy" section.
2) In the "Content Settings" popup, click the "All Cookies and Site Data" button under the "Cookies" section.
3) In the "Cookies and site data" popup, use the "Search Cookies" textbox to look up the domain that is the source of the IndexedDB.
4) Click on the domain entry in the list.
5) Click on the "indexed database" tag listed under the domain.
6) Click on the "Remove" button in the drop down detail for the indexed database.
Chrome Developer tools now have an option to delete all databases for an app, under "Application/Clear Storage".
In Debian GNU/Linux directory
/home/[username]/.config/google-chrome/Default/IndexedDB/chrome-xxx.indexeddb.leveldb/
contains regular files (for example):
000003.log, CURRENT, LOCK, LOG, MANIFEST-000002
It's not possible to delete IndexedDB database (as opposed to stores and indexes) programmatically.
As for manual workarounds, this post details the location of the database on Windows systems for Firefox and Chrome.
Update: Thanks to developer Joshua Bell, Chrome implements an off-spec (but insanely useful) deleteDatabase method on the window.indexedDB object. Here's the crbug that landed this patch. Moreover, in newer versions of IE, you can delete databases via a settings panel.
This is maybe overkill for your specific question, but I kept ending up here in my struggle to delete my idb.
My solution in the end was based on mozilla's documentation, but required that I first close the database.
For me, in Javascript, the code looked like this:
my_db_instance.close(function(e){console.log(e)});
var DBDeleteRequest = indexedDB.deleteDatabase("my_db_name");
// When i had the base open, the closure was blocked, so i left this here
DBDeleteRequest.onblocked = function(event) {
console.log("Blocked");
};
DBDeleteRequest.onerror = function(event) {
console.log("Error deleting database.");
console.log(event);
};
DBDeleteRequest.onsuccess = function(event) {
console.log("Database deleted successfully");
};
In order to complete #Judson's answer, based on #fullstacklife's comment; for deleting IndexedDB in chrome using javascript you should:
let currentIDB = indexedDB.open("DB_NAME", DB_VERSION_INTEGER);
currentIDB.onblocked = function(){
//
};
currentIDB.onerror = function(){
//
};
currentIDB.onsuccess = function(){
var idb = currentIDB.result;
idb.close();
indexedDB.deleteDatabase("DB_NAME");
};
To delete IndexedDB in Chrome on Android:
Settings
Site settings
Data stored
Search needed site and press
Delete stored data
(You cannot delete IndexedDB via Settings -> Privacy and security section, what is quite misleading...)
Alternatively, use your web application in a new incognito window, and close it when you're done: database deleted.
In chrome OSX- /Users/user/Library/Application Support/Google/Chrome/Default/IndexedDB
Firefox OSX - Users/user/Library/Application Support/Firefox/Profiles/4zaemxcn.default/indexedDB
You just need to make visible the library folder. All of the files are stored in folders(which are called as domain name) and the files use hash, but you can figure out the name of database from it.
You can delete data from IDB because it is a client side database and all of the data is stored locally.
In windows, you can manually delete the whole IndexedDB databases by locating the IndexedDB directory for the browser and deleting it
For Chrome:
C:\Users\user-name\AppData\Local\Google\Chrome\User Data\Profile 1\IndexedDB
You can delete every folder which clears up the indexedDB. You can start over now.
I needed to get rid of an indexedDB in Chrome. So I search for this lousy thing called "email assistant" on my computer using MasterSeeker. Found the thing in a bunch folders that were indexedDB in Chrome. It seemed too easy that I just delete those files. I looked up how, and ended up here. I went to chrome settings with my Windows 10 PC. I just gave it a shot at trying to clear the browsing data. Presto - all those files disappeared from indexedDB, including that dreaded "email assistant" crapola. Now when I look in the indexedDB folder all I see that has reappeared is https_mail.google.com_0.indexeddb.leveldb - which looks like a safe non-irritating thing.
//By for loop
const deleteAllDBs=async()=>{
const existingDBs=await indexedDB.databases()
for (let i = 0; i < existingDBs.length; i++) {
indexedDB.deleteDatabase(existingDBs[i].name)
}
}
//By forEach loop
const dbs = await window.indexedDB.databases()
dbs.forEach(db => { window.indexedDB.deleteDatabase(db.name) })
Since most of the answers not mentioned how to find the db names:
Open the site you want db to be cleared.
Press F12 in Chrome, select console regime.
Type indexedDB.databases().then(res => console.log(res)) to learn database names used by this website (open the result with interactive console, find the name).
Finally, as mentioned above, execute in the console indexedDB.deleteDatabase('<your database name>').
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