I need to change the color of some words in one category of the widget, I have seen the youtube video about Development Tools.
When I locate the part where I want to change, and I do the change in "Elements" (of Development tools) on the top right corner in the element.style {color:red;
}
but as following the video when I go to resources the changes I made is not there.
I can only edit in Elements, I cant save it
I can only save in Resources, I cant edit/add anything
can someone please help me how this dev tool suppose to work?
I can however edit/add AND save in the Sources, maybe I need to save the style sheet from Resources to Sources? is that what I am suppose to do?
As you said Chrome Dev Tools don't have the builtin function to save the code you edit, anyway there are a couple of Chrome extensions. The best in my opinion is Tincr.
You can find it here Tincr
Then you can also find a tutorial here: http://addyosmani.com/blog/lets-tincr-bi-directional-editing-and-saving-with-the-chrome-devtools/.
Basically you
install the extension,
then you select the application type between: Ruby on Rails, Chrome Extension, Atlassian Plugin and Configuration file,
then you can add the root directory of your project.
When you are done, if you edit something using Google Chrome Dev Tools, the changes will be saved automatically to the source files and there is also a live reload function, so you don't have to press the refresh button or F5 to reload the page after changes.
You cannot edit files on the server through the developer tools and changes will not stay after a refresh.
An updated answer as of March 2013, you can now save changes (JS and CSS, not DOM) from within Dev Tools.
http://remysharp.com/2012/12/21/my-workflow-never-having-to-leave-devtools/
Related
I want to raise this question again.
What was suggested in the answer to this question is to use old fashioned approach:
Store css in public folder, and incude it via <link href=
Add public folder to google chrome devtools workspace
Not a rocket science at all. Works, but two things I don't like with this approach:
It's still not native and for production I will have to move files from public folder
Each time you edit css, meteor notices changes and reloads application. Author of that answer ignored it.
Basically this result I want:
I start meteor project, open chrome developer tools
Each time I edit css in chrome developer tools it automatically changes in project.
Problems:
Meteor performs concatenation of all css files even with --debug flag on. But provides source maps.
Meteor will still reload after file changes, but fortunately for styles meteor performs soft injection, I would call it, so page will not really be reloaded. It's okay and not really a problem.
Because of 1st problem and this bug I can not get it work.
This feature is very important for me in terms of productivity.
I would offer a good bounty for some guru, who could give me a direction to solve this. Maybe you point me to some starting points to make a plugin for chrome, this also would be acceptable
The way I do it is pretty simple.
Open your website
Right click -> inspect element
Click on Settings - (the wheel in the top right corner).
3.1. Select General tab and look for Sources label (around the bottom). There search for Enable CSS source maps and Auto-reload generated CSS. Check both. You can check all the features if you want.
Select Workspace tab and add the project folder.
Refresh devtools/browser and repeat everything to step 2.
Now, open the Source panel (Elements - Network - Source). Navigate through your folder and find the css file.
Right click on it and select Map to file system resouce. A window with few css files should appear (depends on your projects config).
7.1 Select the css file for your project. A popup asking you to restart devtools will appear. Click ok. Enjoy.
I haven't tested this with Meteor, but for Harpjs & static HTML files the Chrome LiveReload extension will inject changes in Chrome Dev to the actual file.
I am a super beginner and am learning as I go, so please be patient with me!
So here goes:
I am trying to make some edits on a Magento theme (removing buttons - Twitter, to be exact) and am using FireBug (Firefox Add-On) to locate the directory to remove the button.
Firebug will allow me to find the CSS directory in order to change certain things but does not show the file to make edits in to remove the button. From other similar questions, I have gathered that it is not possible to find server directory paths from apps like Firebug (or is it?); however, is there any advice or easier method to go about finding the location of the button?
Any information helps, thanks in advance.
Indeed, you cannot use firebug to find in which file that button is inserted. You have to go to magento admin, system- > configuration -> developer. Select your website in view top left. then in template path hints select yes. Now go into frontend and refresh. You will see a lot of red lines with the path to the folders where everything is. Do not do this in production as it is a negative experience for customers.
try saving the file locally by doing ctrl + s. That may give you the css file to make changes.
Check this step by step instruction:
Step 1: System >> Configuration >> Developer
your current configuration scope is set to “Default Config.” You cannot setup Magento Template Path Hints globally. You’ll need to set the Configuration Scope to a website or store configuration. When you do, you’ll see a screen like this:
Change Template Path Hints no to yes and save the configuration. Reload your front page.
For more info
I have a problem in my local pc with some grids in an asp.net website.
The first image is the testing server, and the grids are showing ok here.
The second image is the same page (sabe website, same vs solution) running on my pc(localhost).
What can be missing in my pc??
Thanks!
My initial thought would be to check whether the CSS file you are linking to is accessible in your local environment. Look in the source view of your web browser. You could also pull up IE Developer Tools (F12) and click the CSS tab.
I think I have installed everything needed and installed it correctly, but I am obviously missing something; or had a misstep somwhere along the line. I am on a Linux and I know for a fact the site works when viewed elsewhere. Here is a screenshot of what I see when I view the site locally: http://imgur.com/yPWcanu What are the common causes for this?
There might be some problems with paths. Open the Chrome development toolbar and check if there's a problem with loading the css files.
You should see them under the "Network" tab after reloading the page.
I work on a local web site project and i use google chrome for testing my css.
So i want to know how can I save the changes I make in chrome css tool to my project, because i have always to copy and paste the css i put to google chrome in my file .css.
Navigate to this stylesheet in the Sources panel of the Developer
Tools, Right-click it, and Save-As this file to your computer
see here for more info
You can use special tools like Emmet LiveStyle http://livestyle.emmet.io/ so that you can edit code in Chrome and it will be automatically saved to your css files (There are more than one of them)