In the below image, as you can see, there is a Sources tab that allows me to browse through my project files.
Also, my Firefox DevTools do not show a Storage tab. I believe that is the tab that will allow me to browse my project files. How do I enable it?
This is my actual project structure:
The Firefox DevTools don't have a panel that shows all files at one place the way the Chrome DevTools do it. Though there are different specialized panels showing you the same info. E.g. the Style Editor shows you all CSS sources. The Network Monitor shows all requested files with focus on network request information.
The Debugger is meant to debug JavaScript. So, it only displays JavaScript sources.
The Storage panel is enabled by default in newer versions of the Firefox DevTools. To enable the Storage panel in older versions of Firefox you need to switch to the settings and click the checkbox besides Storage:
Though the purpose of the Storage panel is to display storages like cookies, the IndexedDB, the local and session storage. It does not display files.
Related
After i have set up workspaces and can now edit my SASS files directly via the Sources panel in Chrome DevTools, all changes i make in the styles panel persist throughout page reloads. Changes are made automatically to the generated CSS file but not the SASS file (the latter of which i read that its not possible – one must edit via the Sources tab).
Is this intended behaviour? How can i stop local changes in the styles panel (that are not saved to any of the files anyway) from persisting by being written into CSS files?
In the DevTools settings, Enable Local Overrides is turned off.
Noticed this same issue, but once I turned off Enable Local Overrides and cleared my cache/application data it worked as expected.
Wave web accessibility tool could be used to inspect webpages to check their compliance with accessibility standards for visually challenged. Is there any way this online tool or its Chrome extension, could be used to inspect html files hosted in local desktop server?
This is an old question, but for the benefit anyone else finding it as I did in a search for the Chrome WAVE extension not working for localhost URLs...
It appears that you need to enable "Allow access to file URLs".
Right click the WAVE icon, click "Manage Extensions" and flip the "Allow access to file URLs" switch.
The Firefox aXe extension https://addons.mozilla.org/en-US/firefox/addon/axe-devtools and the Chrome aXe extension https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US both allow for analyzing files that are on a server, on a local server and on the local file system.
The aXe rules are newer than the WAVE rules and the instructions that are provided when you click the "more info" link are clear and precise. If you are using WAVE, you should definitely give aXe a test drive.
If you can open the page in a browser, you can use the extension to check the page. I just tried it with both a page running on localhost and a page I opened as just a file on C drive.
I'm using the WAVE add-on in Firefox.
According to their site:
The toolbar can check intranet, password-protected, dynamically generated, or sensitive web pages. Also, because the WAVE toolbar evaluates the rendered version of your page, locally displayed styles and dynamically-generated content from scripts or AJAX can be evaluated.
The online tool, however, requires a public URL.
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.
How can I allow multiple file selection in an Alfresco file browse window?
Currently when a user clicks on the "browse" button, the file browse
window is displayed and the user can only select one file.
Is it possible to allow multiple file selection?
Thanks
For som reason you are not getting the flash uploader to show up. Either it has been disabled in your installation or you dont have the correct flash version installed. In later versions there are drag and drop support. However since Microsoft dont implement all html5 this does not work on ie browsers.
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/