I am using the latest PhpStorm 2016.3 on Windows. While editing a markdown file, I noticed there is a preview window (that I am fairly sure is new, but it has been awhile since I edited markdown). Unfortunately, it looks like this, where the right side preview is unreadable:
I have set up Settings->Editor->Colors and Fonts->Font to be Source Code Pro, size 28 long ago to handle my 4K monitor. And I found Settings->Editor->Colors and Fonts->Markdown where I can change the look of the left side, but not the right. So I have two questions:
Is anyone else seeing this (standard or 4K monitor)?
Is there a setting that I can change?
OK, so I found out that JetBrains has a plugin named "Markdown Support", so it is important to make sure only that plugin is installed by checking Settings->Plugins.
I was using a third-party plugin before and I believe it was turned off automatically during upgrade. When I tried to turn it back on, and restarted PhpStorm, a prompt appeared indicating the two plugins were incompatible and I had to choose one, so I chose the JetBrains plugin.
Then, Settings->Language & Frameworks->Markdown->Preview, change the Preview browser field to JavaFX WebView. And the preview pane is back to the land of readable fonts.
I'm trying to list other extensions from my Chrome extension, and show their icons.
Another extension (Zenmate VPN) shows other's icons easily. I figured out that it has management permission in it's manifest.
I add "management" to optional_permissions and ask user to enable it after a click.
After that, I can list extensions, but the icons are still unaccessible in the page.
When I add management to permissions section, everything works fine. The problem is that we don't want to add this permission there, because Chrome will disable the extension by default if the updated version asks for more permisssions.
Is there a way to somehow refresh permissions in a page, in order to make icon URLs work (chrome://extension-icon/*), like they work in ZenMate?
If you already have chrome://favicon permission you can use it to display an extension favicon:
<img src="chrome://favicon/chrome-extension://igiofjhpmpihnifddepnpngfjhkfenbp/">
In case you didn't have chrome://favicon permission initially, try adding it in optional_permissions. If it won't work, try adding to permissions but first test if it'll disable your extension on update.
Other icon sizes may be specified (in the absence of an actual big icon the default 16x16px is scaled):
Retina 2x DPI: chrome://favicon/size/16#2x/chrome-extension://.......
48px: chrome://favicon/size/48/chrome-extension://.......
I checked if I could go with wOxxOm's answer, and mostly extensions did not have bigger favicons, nor I can request chrome://favicon/* permission: Chrome throws an exeption:
Unchecked runtime.lastError while running permissions.request: 'chrome://favicon/*' is not a recognized permission.
So I found a simple and robust solution: I just close the current tab and create a new one:
permissionsAchieved = function(allowed) {
chrome.tabs.create({ url: "<write current url here>" });
window.close();
},
Done. In the newly opened tab, the icon is shown correctly.
But thanks for a suggestion!
Every other website I visit, the inspector works as expected:
But in many of the sites I'm editing within apache server (using xampp) somehow they doesn't show the "filename.css:lineNumber" data
Also, every change I try to do in the inspector in thse sites, doesn't do anything to the code shown in the source tab.
I've tried refreshing, hard refreshing with cache, closing and opening the tab, closing and opening chrome again. The same problem occurs.
In other sites the inspector works well, but not in many of the localhost sites.
Has someone experienced this before? Is there a way to fix this?
If you are using a client-side CSS generator library such as Lea Verou's excellent -prefix-free or client-side Less, you will not see source information as it has all been processed and reinjected as style elements.
Client-side Less has a property [dumpLineNumbers] to include source line info as a comment in the generated source. (I'm not sure if this will display in Chrome's inspector - but I think it might)
The only "fix" I know of for -prefix-free is to temporarily remove it, obtain the source info for reference, then put it back in.
I have had the exact same problem (not using a css generator), and it appears to be a known bug with the current version of Chrome, the solution is to use the more up to date Beta version known as Chrome Canary - Here's the link :)
https://www.google.co.uk/intl/en/chrome/browser/canary.html
Try to check what the format of your CSS file is. I had the same trouble with the UNIX and Macintosh formats. For example, try to open you CSS file in Notepad++ and in the bottom right corner of the window you'll see your current format. If you see UNIX or Macintosh there, click it with the right button of your mouse and change to DOS/Windows. Then save your file and refresh your page in Chrome. It definitely helped in my case.enter image description here
I have an intranet here where I want to link to some local files on a network share.
The Path to the files has special characters (mutated vowel, e.g. "äöü").
My href-links look like the following:
href="file:///\\SERVER\share\path\für alle\example.pdf"
The link does work in IE, and also if I open it in Firefox as a new Tab. But it doesn't work if I simply click on it. Instead of the document, my local folder "My documents" opens.
Do I make something wrong? Or is this a Bug in Firefox? (using Firefox 32.0.1)
PS:
for your information: I have allowed the local file links in Firefox in "about:config" with the following entries:
capability.policy.policynames: localfilelinks
capability.policy.localfilelinks.checkloaduri.enabled: allAccess
capability.policy.localfilelinks.sites: http://intranet
I have tried different computers now. Obviously, this error only appears on my own computer.
I have created a new firefox profile, this solved the problem. So my profile seems to be corrupted or maybe I have a problematic setting.
How to save CSS changes of Styles panel of Google Chrome Developer Tools?
At tool's website it's mentioned that we can see all change in resource panel
But I'm working locally on a CSS file but changes are not showing in Resource panel for me
By the way Do you know any add-ons , tools to save css changes of Chrome Developer tools?
I know for Firebug there are many https://stackoverflow.com/search?q=firebug+CSS+changes+save
You can save your CSS changes from Chrome Dev Tools itself. Chrome now allows you to add local folders to your Workspace. After allowing Chrome access to the folder and adding the folder to the local workspace, you can map a web resource to a local resource.
Navigate to the Sources panel of the Developer Tools, Right-click in the left panel (where the files are listed) and select Add Folder to Workspace. You can get to a stylesheet in the Sources panel quickly by clicking the stylesheet at the top-right of each CSS rule for a selected element in the Elements panel.
After adding the folder, you'll have to give Chrome access to the folder.
Next, you need to map the network resource to the local resource.
After reloading the page, Chrome now loads the local resources for the mapped files. To make things simpler, Chrome only shows you the local resources (so you don't get confused on as to whether you are editing the local or the network resource). To save your changes, press CTRL + S when editing the file.
p.s.
You may have to open the mapped file(s) and start editing to get Chrome apply the local version (date 201604.12).
DevTools tech writer and developer advocate here.
Starting in Chrome 65, Local Overrides is a new, lightweight way to do this. This is a different feature than Workspaces.
Set up Overrides
Go to Sources panel.
Go to Overrides tab.
Click Select Folder For Overrides.
Select which directory you want to save your changes to.
At the top of your viewport, click Allow to give DevTools read and write access to the directory.
Make your changes. In the GIF below, you can see that the background:rosybrown change persists across page loads.
How overrides work
When you make a change in DevTools, DevTools saves the change to a modified copy of the file on your computer. When you reload the page, DevTools serves the modified file, rather than the network resource.
The difference between overrides and workspaces
Workspaces is designed to let you use DevTools as your IDE. It maps your repository code to the network code, using source maps. The real benefit is if you're minifying your code, or using code that needs to get transpiled, like SCSS, then the changes you make in DevTools (usually) get mapped back into your original source code. Overrides, on the other hand, let you modify and save any file on the web. It's a good solution if you just want to quickly experiment with changes, and save those changes across page loads.
New versions of Chrome have a feature called workspaces which addresses this issue. You can define which paths on your webserver correspond to which paths on your system, then edit and save with just ctrl-s.
See: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/
I know it is an old post, but I save it this way :
Go to Sources pane.
Click Show Navigator (to show the navigator pane on left).
Click the CSS file you want. (It will open in the editor, with all changes you made)
Right click on editor and Save your changes.
You can also see Local Modifications to see your revisions, very interesting feature.
Also work with scripts.
You're looking in the wrong section of "Resources".
It's not under "Local Storage", it's under "Frames":
The above screenshot shows a diff of the original styles against the new modifications made in the devtools. You can right-click the item in the left pane and save it back to disk.
Tincr Chrome extension is easier to install (no need to run node server) AND also comes with LiveReload like functionality out the box! Talk about bi-directional editing! :)
Tin.cr Website
Chrome Web Store Link
Andy's Blog Article
Now that Chrome 18 was released last week with the required APIs, I published my chrome extension in the Chrome web store. The extension automatically saves changes in CSS or JS in Developer tools into the local disk. Go check it out.
UPDATE 2019: As other answers are bit outdated, I'll add updated one here. In latest version there's no need to map the chrome folder to filesystem.
So, suppose I have a web folder containing HTML,CSS,JS files in desktop which i want to be updated when I make changes in chrome:=
1) You'd need a running local server like node etc, alternatively this vscode extension creates the server for you: live server VSCode extension, install it, run the server.
2) load the html page in chrome from running local server.
3) Open devTools->Sources->Filesystem->Add folder to workspace
4) Add the folder which is used in running local server. No additional mapping is required in latest chrome! Ta-da!
More on it Edit Files With Workspaces
Note that the changes made on the styles tab will NOT reflect on the filesystem files.
Instead you need to go to devtools->source->your_folder and then make your changes there and reload the page to see the effect.
As long as you haven't been sticking the CSS in element.style:
Go to a style you have added. There should be a link saying inspector-stylesheet:
Click on that, and it will open up all the CSS that you have added in the sources panel
Copy and paste it - yay!
If you have been using element.style:
You can just right-click on your HTML element, click Edit as HTML and then copy and paste the HTML with the inline styles.
FYI, If you're using inline styles or modifying the DOM directly (for instance adding an element), workspaces don't solve this problem. That's because the DOM is living in memory and there's not an actual file associated with the active state of the DOM.
For that, I like to take a "before" and "after" snapshot of the dom from the console:
copy(document.getElementsByTagName('html')[0].outerHTML)
Then I place it in a diff tool to see my changes.
Full article: https://medium.com/#theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a
To answer the last part of your question about any extensions that can save changes, there is hotfix
It allows you to save changes from Chrome Dev Tools directly to GitHub. From there you can set up a post-receive hook on GitHub to automatically update your website.