So I am a very new developer (less than a month) with no formal education and I am working on bugfixes with a WebApp (.NET Framework). I was asked to remove a button from one of graphs as it was redundant. So I open dev tools and inspect the element. Go to the html (picture below) and "add" a (style = "Display:none") attribute to the HTML and it does the job exactly as I want it! yay!
Now I need to change the source code... but For the life of me I cannot find anything related to this. I search for the class, ID, and various other attributes in VStudio but nothing. I assume this is because the HTML and/or CSS is spawned from a JS file.
How do I now trace the source code responsible for this? And in general, how does one translate a change made on dev tools to the real code? We use w2ui, plotly, and bootstrap.
I have already tried the sources page on dev tools but the file it referes to is basically empty.
Sorry if this is phrased poorly or a repost, I am really new to all of this but LOVE every second of it.
Related
I'm trying to customize a theme for a Magento 2 website (it was purchased), and for the most part I know where most of the .css calls are coming from. However, there is one sub-menu, I cannot find the source css file for the life of me.
Normally I use Chrome's inspection window to identify the css that is generating the colors/details that I'm looking for, and then search the source files for the same .css reference, and then make the modification as needed.
However, as mentioned I'm struggling to find a specific piece of css code, and I'm wondering if there might be a better way to find what I'm looking for?
http://bricss.net/post/33788072565/using-sass-source-maps-in-webkit-inspector - Try this one!
https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3 - this is how you set up your css source mapping by using default developer tools :)
i have made a webpage and now it is "feature-complete".
As a next step i want to put some style to it.
The project is based on the Play framework and i choose SCSS as my CSS alternative (with an SBT plugin to convert SCSS -> CSS).
Every time i change some CSS i have to reload the page in the browser, which takes a while, see if i like it and keep or revert. Then start over.
This workflow does not seem right to me. How do you style a webpage built with Play (specifically: i use Play templates, so i cannot just copy every piece of HTML into a CSS editor and style everything from there)?
The best way that i found is to change the CSS directly in Chrome, remember the changes and apply them to the source file later on.
Is there a more "automatic" way of doing things? Any nice editors or browser plugins that change the source file directly? What am i missing?
What are other people, using Play framework (or other templating systems) doing?
Thank you!
Maybe you can download an extension that automatically refresh's your page every ... seconds. On this way you only have to "Alt-tab" between your code and your page.
BTW: I couldn't comment this, I need 50 reputation. Otherwise I wouldn't have commented it because this isn't really an answer but this is just my advice.
Is there a way or tool that could let me step through the painting of CSS rules, one by one?
Similar as one would do in an IDE with program code, but with CSS. (But I wouldn't preferably want to do it by taking the browser's source code and stepping through its underlying functions - I just mean stepping throug "updates" by CSS rules, in a form similar to a Web Developer Toolbar.)
I expect this is usually more tedious than useful, but in some cases it would really help, in web development, like debugging cats and owls or finding out how a particular effect is achieved.
edit to clarify, by "stepping through" I mean sg. like: potentially stopping the browser from painting another rule, after each end every rule I choose, before the next one is applied (each before the "final paint" of the page is finished), for inspection of what happens.
edit 2 after BoltClock's comment, I replaced the word 'render' with 'paint', to be more clear. Removed original to be uncluttered.
Beside already mentioned webtools i guess this is only possible if the complete source code of the browser is available so its possible to either locally debug or remote debug the browser application itself with breakpoints set to the interesting "toplevel" functions.
It is for example no problem to download the source of the Java based open source browser Lobo which can then be debugged like any other application directly from your IDE like eclipse, intellij etc.
I however dont think the complete source of products like the MS Internet Explorer will ever be fully available to allow you to debug its deepest magic (which in case of MS Internet Explorer probably also takes a livetime...).
So coming back to a browser that has source code available you can either:
Have the browser beeing compiled/ run inside a IDE and directly debug your local code
Have the browser running as application allowing remote debugging and the according source code as source for a remote debugger (mostly as well from within your IDE).
This way you can analyse the deep magic of such a browser where you see how the different resources like images, css etc. etc. are collected, validated, parsed, processed and in the end displayed.
Once the interesting functions are located and a good set of (conditional) breaktpoints is set this could be very useful when it comes to the behaviour of a specific browser.
If that however is too detailed for your context i guess there is no other possibility but to rely on the already given functionality regarding analysing the browsers behaviour like with chromes devTools or the Mozilla plugin Firebug. No doubt this will more and more be integrated in such plugins/ tools like the comment of user BoltClock suggests and it is always worthy to study the functionality of such plugins/ tools to take the biggest possible advance of them.
I often have a problem where I'm working on a dynamic web app with tons of front-end or back-end code and there is a CSS problem that just eludes me despite an hour of scratching my head. I know that StackOverflow could solve it in a second, and I'd like to post it, but I either have to
Make the app public along with steps to reproduce the state, or
Tediously copy out the DOM and assets (CSS) along with the current state.
Neither is very straightforward. Note that the DOM is dynamically generated so "View Source" won't cut it. Similarly, the CSS could be spread out across multiple files and I'd like to just grab it all at once.
Is there an easy way to copy out the DOM and all CSS as a single file so that I can insert it into something like JSFiddle and be on my way?
The quickest way to get all HTML on the page as-is is to paste this in the address bar:
javascript:alert(document.body.outerHTML)
You can also use the console, of course, but the above works even in old IE versions and is easier to copy/paste.
I don't think there's a good way to get the CSS at all, but you could try using a jQuery selector or similar to get the URLs:
$('link[type="text/css"]')
.each(function(x, link){
console.log(link.attributes.href.value)});
And downloading and concatenating the CSS.
My project has collected CSS entropy (unused classes) during its course of development.
Now in order to keep the CSS file small, I want to remove all unused CSS references. But doing that manually involves searching for each class in the entire project. That takes time.
Do you know of any way/tool which I can adopt to find out which CSS classes are no longer used in my project, and remove it?
I am programming on ASP.NET. Visual Studio.
In the Chrome Browser, press F12, go to the Audit tab, choose the "Reload page and audit on Load" option, and refresh the page. Chrome will list all the unused CSS rules.
For an online solution, go to unused-css.com.
You might find this Firefox extension useful: http://www.sitepoint.com/dustmeselectors/
I wrote a tool which allows you to find all class and CssClass attributes in your aspx source code.
See my blog entry for info and download.