I just follow this tutplus tutorial for source map sass.
I cannot find Support for sass option in Experiment tab under the inspect element in chrome. Is it removed? Am I late to use this feature ?
My sass version is 3.3.8 (Maptastic Maple)
How can I make SASS editing work in Chrome Devtools?
I made it work. SASS support is no longer an experiment: It's now a standard.
I just follow simple steps to make it work.
1) Open your inspect element on chrome and click on gear icon which appears to the top right.
2) Enable the CSS source maps (which is I think its enabled by default. If not just check it. After enable the css source map don't close it.)
3) Click on Workspace tab on the left panel just below the General tab.
4) Add your source code folder by clicking the Add folder button (close the box.)
5) Go on Sources tab and find your scss file.
Now you can make changes and hit ctrl+s it will automatically change on your style.scss.
As of Chrome 75, here's how you turn on CSS source maps.
Open the browser's Developer Tools (Ctrl+Shift+I).
Open the dropdown menu in the top right corner, and click on "Settings."
Look for the checkbox that reads "Enable CSS source maps" and turn it on.
Just my 2 cents here. Kaspersky Chome extension was blocking my CSS mapping on Chrome Developer Tools. Didn't find anywhere how to add an exception to that...
Related
I recently updated to Firefox 49 and I don't like the new color scheme (green and grey) introduced for the DevTools.
Can anybody tell me how to switch to the old DevTools theme (dark , orange , blue)?
You can select a theme for the Firefox DevTools through the settings page. You get to the settings page by clicking on the gear-like icon near the top left (fourth icon in from the left) of the DevTools. It looks like:
If those are not sufficient, you will need to look for an add-on which will provide the theme you desire, write one yourself, or make changes to your userChrome.css file (answer with code changing the position of the DevTools inspector breadcrumbs) with the CSS you desire. For the appropriate CSS classes, you could look in chrome://devtools/skin/dark-theme.css, or one of the other CSS files with DevTools themes.
I am using Visual Studio 2013 with Web Essentials 2013 and when using browser link, it is not finding unused css when using both IE11 and Chrome 31. I have tried everything I can think of and it won't show me the unused css class. Everything else with browser link seems to be working except this function. Does anyone have any ideas how to get this to work?
Run the project and make sure Browser Link is enabled. While running there is an icon on your toolbar with a round going arrow. Click the downarrow next to it and click "Start Recording (all browsers)".
Keep an eye on your Error List window where it should start showing the unused CSS. When click through your website the list should decrease as it ticks off the CSS it encounters.
Make sure that you go through all the paths of your website otherwise some CSS might be marked as unused while it actually is (jQuery addClass for example).
Source: https://www.youtube.com/watch?v=bM5oz_2OidI
Anyone had any luck adding a custom toolbar button to the Compose window of Thunderbird or know of an example plugin that does it? I'm new to Thunderbird development and haven't had any luck getting https://developer.mozilla.org/en/Custom_Toolbar_Button to work for the Compose window.
What Mr. Jonathan pointed out is a good tip, and that particular extension does have an example of what you are looking for.
Open up your own chrome manifest file and make sure your code is telling Thunderbird which of your own xul files to "align" with its own xul files. In these examples, we will assume that your xul file is named overlay.xul and it has the code for both the button in the toolbar, as well as anything you want to do in the message-compose window.
If you find that your button won't show in the "customize toolbar" dialogue, it is because the xul is mismatched in your chrome manifest.
Make sure this in your chrome.manifest:
#THIS will use your xul file for the message-composing window
overlay chrome://messenger/content/messengercompose/messengercompose.xul chrome://youraddon/content/overlay.xul
#If you want a button, too, make sure this is in your file, too.
overlay chrome://global/content/customizeToolbar.xul chrome://youraddon/content/overlay.xul
You should look at the code of addons that perform (succesfully) a similar task, e.g. https://addons.mozilla.org/en-US/thunderbird/addon/latex-it/. In particular, look at the chrome.manifest file and the overlay.css and overlay.xul files.
Please keep in mind that the toolbar button will not appear by default, you'll first have to right-click on the toolbar then hit "customize".
I am learning chrome extension by example. Here is the example I currently learning: http://www.chrome-extensions.net/extensions/mappy/
There are three JavaScript files in this sample project: background.js mappy_content_script.js popup.js.
"mappy_content_script.js" is shown in the Combo box of Scripts tab of Developer Tools.
"popup.js" can be found if I right click the extension icon and choose "Inspect popup".
The problem is I can't debug "background.js" or find it in the Developer Tools. I tried insert "debugger;" in this JavaScript file. I also tried use profiling tool to record the script execution. However, when I click the link of "background.js", a blank page shows up.
Is this a bug of chrome or did I miss something? Thanks
background.js is loaded in the background. To inspect it visit chrome://extensions, find the loaded extension, and "inspect active views" for the background script.
Edit
Below is a screenshot of the chrome extensions page. A click on the link background page opens the background page for this extension.
Additional information
EDIT 2020
Here is how you can see the content scripts and debug,
Nowadays you have to install a Chrome extension to allow you to inspect the view of a page, specifically the Develop and Debug Chrome Apps & Extensions
There is an easy way to access your extension code in DevTool and debug it.
Open the DevTool (e.g. F12) , click on "Sources" tab
then look for "Content Scripts" menu next to Page , Filesystem, Overrides etc.
and click on it .
you should see all active extensions listed there and you can easily add break point to each js code and reload the page to debug through
I feel a little caught between a rock and a hard place here. I want to use Firefox's built in spell checking without disabling Ckeditor's context menu as this renders it impossible to work with tables. Is there a way of getting the best of both worlds here?
You could try setting the disableNativeSpellChecker property to false - it should then be possible to see the native spell checker markings within the editor - however for me I couldn't get this to work in Firefox, only Google chrome.
You can then hold the ctrl key down when you right click to show the browser context menu (provided browserContextMenuOnCtrl has not been set to false)
HTH.
Use the browser's default contextmenu for right click action, then you don't need to press Ctrl to shoe the browser's default context menu.
config.removePlugins = 'scayt,menubutton,contextmenu';
Enable the built-in spell checker if the browser provides one.
config.disableNativeSpellChecker = false;
hi there you can disable it by going to
Ckeditor>File Editor.then make sure you're editing the ckeditor.config.js file!
then add the two lines at the bottom (after the }; tag) add the two lines like below!...
**> CKEDITOR.config.disableNativeSpellChecker = false;
CKEDITOR.config.browserContextMenuOnCtrl = true;**
then save it..........
when writing in ckeditor a red dot underline will appear if your spell is incorrect!
when you right click the ckeditor's context menu appear.....but when you Ctrl+Right Click the browsers default menu appears....thanks..........
Use this plugin: http://martinezdelizarrondo.com/spellcheck/ and as it's stated, you have to install the WriteArea extension in Firefox.
Have you tried to enable SCAYT (SpellCheckAsYouType) in CKeditor? It is buit-in there and works as a plug-in.