I use Chrome Developer Tools to debug my JavaScript code, but I have one pet peeve with the way Chrome lets you edit the JavaScript files under the Scripts tab. Sometimes, I do not realize that I am in Chrome and I start making changes to the code under the Scripts tab, only to realize when I refresh that the changes I had just made were never saved to disk!
I was wondering if there is way to make the code shown in the Scripts tab read-only, so that if I try to edit the file in Chrome, I'll see that it's not editable and then realize that I'm not in my IDE.
Use the following process to make the script source read-only in Chrome 32+:
Go to the chrome://flags/#enable-devtools-experiments URL
Select Allow UI Themes
Open Chrome Dev Tools
Select Settings (Press F1 or click on the three dots on the far right)
Select Allow UI Themes
Create a DevTools theme with the following style:
.content-view.script > .text-editor { -webkit-user-modify: read-only !important; }
Publish it the the Chrome Web Store
Install the Theme
Restart Chrome
References
Custom.css has stopped working in 32.0.1700.76 m Google Chrome update
Sample DevTools Theme Extension
Chrome Developer Edition Dark Theme for Chrome Dev Tools
WebCore Inspector Script Content View
Chromium User Data Directory
Use the old process for Chrome 31-:
Use a user stylesheet to disable the script tab altogether:
.toolbar-item.scripts { display:none !important; } /* Hide Scripts Tab */
Or simply make the script source read-only:
.text-editor-editable { -webkit-user-modify: read-only !important; } /* Old selector */
.content-view.script > .text-editor { -webkit-user-modify: read-only !important; } /* Older selector */
.editing { -webkit-user-modify: read-only !important; } /* Generic Selector */
Here are several possible locations of the file:
Windows 7 Chromium:
%LOCALAPPDATA%\Chromium\User Data\Profile 1\User StyleSheets\Custom.css
Windows 7 Chrome:
%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
OSX Chrome:
/Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
Ubuntu Chrome:
~/.config/chromium/Default/User\ StyleSheets/Custom.css
Use the following Chrome Devtools URL to reference the relevant styles:
chrome-devtools://devtools/devTools.css
As far as I know, there is no option to disable script editing in the Chrome/WebKit Developer Tools.
Below are two three possible solutions:
Solution 1:
Make an extension that shows an alert every time you make an edit:
JavaScript:
chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(function(resource, content) {
alert("WARNING: Your changes will not be saved!!");
// Optional, but and extra layer of "protection", if you don't want/need it just remove the "experimental" permission from the manifest
if (chrome.experimental) {
chrome.experimental.devtools.console.addMessage("error", "WARNING: Your changes will not be saved!!");
// Shows in red
}
});
Extension (unpacked, first enable the experimental extension API's under chrome://flags): http://www.mediafire.com/?wb1r67ron0x6szh
Solution 2:
Modify the source and run a custom build:
The other option would be to modify the developer tools source, please see https://developers.google.com/chrome-developer-tools/docs/contributing for more details. If you did that, all you need to do is remove the text-editor-editable class from the editor container (line 1279, DefaultTextEditor.js).
Solution 3:
Make chrome auto-save your files:
The third option would be to enable chrome to save your files, there are a number of extensions that do this namely Tincr. Tincr also let's you live-reload your files and offers complete syntax highlighting.
My personal opinion is that this is the best solution.
Related
While Mozilla Firefox at last has gained a preference which allows to set Default Zoom level, Thunderbird still haven't got it. This is significant accessibility issue.
There exist a hack which allows to set the desired zoom level using Browser Console in Firefox, it is described here. I supposed that similar approach would work in Thunderbird and found the working command:
ZoomManager.setZoomForBrowser(getBrowser(), 1.2);
If this command is run in Error Console (analog of Browser Console in Firefox and it can be launched by the same shortcut Ctrl+Shift+J), then 120% zoom will be applied to the letter preview pane (at least).
Now the problem is to run this command at Thunderbird start. I installed userChromeJS extension which is developed to support Thunderbird version 91+ and which will "load the contents of chrome/userChrome.js from the user's profile directory every time a window is opened" as is said in its description. Then I added the next code, found here into chrome/userChrome.js:
if (location == "chrome://messenger/content/messenger.xul") {
setTimeout(function() {
ZoomManager.setZoomForBrowser(getBrowser(), 1.2);
}, 0);
}
})();
But it doesn't work, zoom isn't applied to the preview pane as when I run this command manually.
Maybe this code is wrong? I'm not that good in JS to fix it myself.
Is it possible to spoof Chrome plugins?
I noticed that their names are stored in Preferences and Local State file in /Users/mainuser/Library/Application\ Support/Google/Chrome/Default/Preferences and /Users/mainuser/Library/Application\ Support/Google/Chrome/Local\ State respectively (on Mac), but manually changing the contents of these files gets treated as file corruption. Any idea how to spoof it?
Plugin information are publicly available and are easily inspected with something like this:
var x=navigator.plugins.length; // store the total no of plugin stored
console.log(x);
var txt="";
for(var i=0;i<x;i++)
{
txt=navigator.plugins[i].name;
console.log(txt);
}
I assume you want to modify an extension that you have installed on your machine in order to improve it.
You can use the Developer Mode and load the modified extension:
Extensions that you download from the Chrome Web Store are packaged up
as .crx files, which is great for distribution, but not so great for
development. Recognizing this, Chrome gives you a quick way of loading
up your working directory for testing. Let's do that now.
Visit chrome://extensions in your browser (or open up the Chrome menu
by clicking the icon to the far right of the Omnibox: The menu's icon
is three horizontal bars. and select Extensions under the Tools menu
to get to the same place).
Ensure that the Developer mode checkbox in the top right-hand corner
is checked.
Click Load unpacked extension… to pop up a file-selection dialog.
Navigate to the directory in which your extension files live, and
select it.
Alternatively, you can drag and drop the directory where your
extension files live onto chrome://extensions in your browser to load
it.
If the extension is valid, it'll be loaded up and active right away!
If it's invalid, an error message will be displayed at the top of the
page. Correct the error, and try again.
Paranoid about browser fingerprinting I guess.
If you want hide navigator.plugins list, see this plugin :
https://github.com/bcaller/plugin-privacy-chrome
See content.js#L27 :
properties.plugins = vecw({}, true);
The "real" fix is to stop the enumeration of plugins for everybody, so there is no fingerprint information (after everyone upgrades):
https://bugs.chromium.org/p/chromium/issues/detail?id=271772
If you hide navigator.plugins, that is also an identifying (single bit) feature that will make you stand out since there will be very few users who hide navigator.plugins. Which is why you'd want to spoof.
From another answer, from #Hors Sujet, https://github.com/bcaller/plugin-privacy-chrome is a great place to start how to program a spoof. You'll want to look like the vast majority of Chrome users (I'm not sure that actually exists, though.)
But what you likely really want is EFF's Privacy Badger.
Start here to see the number of bits you can be fingerprinted by:
https://panopticlick.eff.org/
And then install Privacy Badger from here:
https://chrome.google.com/webstore/detail/privacy-badger/pkehgijcmpdhfbdbbnkijodmdjhbjlgp
Im currently working on a fork of the famous web developer extension (chrome, firefox, opera). Exactly I am working on the chrome extension.
The Firefox extension is shown like that:
Chrome instead shows only a icon...
..which toggles the "pretty small" widget:
A part of my goal with this fork is to change this toggle icon to a toolbar such as firefox does.
After studying the documentation chrome extensions (https://developer.chrome.com/extensions/devguide) I came to the result that this is not possible with default settings (browser actions, page actions,...).
When I looked again at the Table of Contents in the documentation I got an idea. There is the possibility to edit the bookmarks. So it could be possible to add an additional bookmark bar/row and place the single web developer actions as bookmark with the function on it.
Is this the right way for solving this? Because at the moment I only see possibilities with more or less dirty hacks. And doing it via bookmarks seems at least dirty.
PS: I also thought about this:
The plugin is actually the same on firefox and chrome and from the same author. So when this adaption of the toolbar in chrome would be easy possible then would not have such differences in the chrome and firefox addon.
Nope, that's simply impossible.
Chrome does not support custom toolbars, and that includes "an additional bookmark bar/row".
The closest, visually, would be injecting UI directly into the top of all pages. I don't think I need to explain why that is hacky.
I'm debugging my code in Chrome with Dev Tools.
I wonder if I can have JS loaded only when DevTools active in Chrome, and ignored otherwise. So that I could ship my code with debugging logic in production, without affecting application performance, for general users.
Something like
<!-- if dev tools working load /debuf.js-->
You can use the devtools-detect library: https://github.com/sindresorhus/devtools-detect
It can detect if the DevTools are active, but it is not 100% correct
Doesn't work if DevTools is undocked and will show false positive if you toggle any kind of sidebar.
I like the integration of the Dragonfly IDE in the Opera Browser. Especially, the link between the visual and the code perspective allow easy editing of the corresponding HTML code. However, I have not found a way to save my changes to the local file.
I have a simple static website that is stored on my local harddisk.
I open the file in Opera Developer (Version 28.0)
I use the 'inspect element ctrl+shift+i' menu option to open dragonfly
I make the changes and check them in the browser
I save the html file from dragonfly
Observation: changes are not saved.
Is there way to save the interactive changes permanently?
It's not really possible, It's just a developer tool.
You can change it on Dragonfly but it won't modify the file.
2 solutions :
you change manually the HTML file with an editor like Notepad after each change on dragonfly
You use some software like Dreamweaver that allow you to see what you're editing in real time and save these changes.