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.
Related
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.
I wish to upgrade my web site development environment. Currently using Adobe Dreamweaver (out of habit), but need to
Write HTML/CSS/PHP/MySQL code in an editor with syntax highlighting, code/tag completion, code hints.
have a browser window that reflects the code window results (on a save). So write HTML/CSS code, save it, and the browser window is updated
support for major browsers (choose the browser to be used in the display window)
allow adjust of browser window width to see responsiveness of my code
supports latest CSS, including CSS Grid and Flexbox
Windows 10 environment; not interested in adding Linux (WSL)
will consider an XAMP/WAMP environment for testing of PHP/MySQLi code locally
free or low-cost programs are preferred (I'm on a limited budget, but will spend the $ for what is needed)
An important part is things running in Windows 10 environment, and the side-by-side display of a code and browser windows in the editor.
I realize this might be an 'opinion' question (and will probably get some downvotes), but need to get some directions to look at. The googles haven't been helpful yet.
If I understand correctly you need a text editor that can help you to indent your code and highlight your errors ?
Try to take a look at https://code.visualstudio.com/. Vs Code Editor
You can find a lot of extension to help you write code and find errors
How can I programmatically interact with an existing web page in a web browser launched in a standard way? For example I navigate to a specific page and want to be able to run a Python script that fills some edits or clicks some elements.
This should be possible at least through IAccessible2 for main browsers, but I did not find any pointers. To put it in another way, how do screen readers do it? And bonus question, is there Python library for it?
EDIT: I am looking for something more than user input simulation. I would like to programmatically read the DOM at least, write if possible. So far I have looked at code in NVDA which is very low-level and complex. Is there anything easier?
How can I programmatically interact with an existing web page in a web browser launched in a standard way? For example I navigate to a specific page and want to be able to run a Python script that fills some edits or clicks some elements.
The answer is keyboard/mouse macros if you have to visually see the browser as it happens. You can google macro programs for your OS.
But you most likely are looking for a headless browser such as PhantomJS, HtmlUnit, TrifleJS, Splash, and SimpleBrowser
Check out - https://saucelabs.com/blog/headless-browser-testing-101
When you mention 'interact with an existing webpage in a web browser launched in the standard way' you are talking about the DOM (Document Object Model).
Many QA environments are running testing scripts on code that has not been rendered by the browser into a DOM (you see the DOM when you inspect a page using your browser tools). When you use a headless browser it creates the DOM and then runs all the tests as if a human were clicking without having to visually look at it happen.
see - https://css-tricks.com/dom/
To put it in another way, how do screen readers do it? And bonus question, is there Python library for it?
Screen readers are interacting with the DOM at a low level. I do not know if there is a Python library. Most likely this would be overkill though unless you are building a desktop app that interacts with browsers like a screen reader does.
edit...
I did some more digging and found this article that is a much more verbose explanation of how screen readers interact with the browser/dom.
Also, there is a python API for manipulating the DOM and this library seemed popular.
Has anyone successfully gotten swfaddress to work with IE8 and above?
It seems that when using standards mode, swfaddress will appear to work fine in IE8 and IE9, however, once the user modifies the hashtag in the address bar, the history list becomes corrupted.
In cases where the user starts the application via the hash tag (http://myapp.com/#/test), and then visits another hash (http://myapp.com/#/test1), the history is never saved.
I have tried playing around with swfaddress 2.5 in the svn repository. Interestingly,
the code is similiar to JQuery Address (by the same author). I also note that JQuery Address suffers from the same problem.
If I turn on compatibility mode in IE, the swfaddress and JQuery Address works perfectly. I have been looking into how compatiblilty mode works, and it does not seem like it would modify or affect javascript execution.
Was anyone able to successfully solve this issue? If not are there any other deep linking libraries for flex or flash that contains all the feature sets of swfaddress?
After looking at libraries such JQuery Address, other JQuery state management plugins and even the BrowserManager that ships with Flash and Flex builder, I discovered that they all ran into the same issue as SwfAddress.
At the moment, SwfAddress offers that best features and comes with a .swc and .as files to easily interface with Flash and Flex applications.
Since the other javascript libraries ended up with the same problems, I have decided to stick with SwfAddress.
On a related note, the author has stated that he is no longer working on SwfAddress, so it would be cool if someone in the community can pick up on where it was left off.
We're developing this ASP.NET web app with multiple users on different browsers. One of the users complains that the pages look funny, and after looking at the screen shot he sent, it looks like the css is not applied. According to the bug report, the user is using IE7 (but I suspect it could be IE8).
I develop in Firefox, and using the web developer toolbar, when I choose CSS --> Disable Styles --> Linked Style Sheets, I manager to recreate a page that looks a lot like the reported one.
I sent a message in return that told him to check the options under Internet Options --> General --> Accessibility, and make sure all the check-boxes where un-chekced. The reply was that they were, but that the page still looked funny.
So, the strange thing is that this app is used by hundreds of users, but I have only gotten complaints from this one user. Does anyone have any idea of what could cause the CSS to not be applied? Could it be my code, or is it some local setting in the client browser or system?
Sometimes there's no substitute for actually walking over to the user and looking at his/her setup. Difficult if they're in a different location, but not impossible; use a remote access tool like Copilot.
If I had to guess in order of likelihood:
They've disabled/overridden application-supplied stylesheets (enough ugly backgrounds and anyone might do this)
They have a caching issue
Could be a very mundane file-related issue - e.g. the version you're looking at references a file that's visible to you, but not to the user. They may even be blocking that file via browser settings, purposefully or not. Have you asked them to request the stylesheet file directly and report back what they 'see'?
Other than that, could be issues relating to the markup used (e.g. bad 'type' attribute) - is your markup validating?
Also, it's obvious, but have you validated your stylesheet? Is this person the only IE7 user?
There's a few things to check.
Firstly, check their anti-virus / security / firewall / etc. That can randomly block all sorts of things.
Secondly, there's a registry setting somewhere to disable CSS, but that'd do it for all websites.
Also, check to see if they've got a load of IE add-ons and toolbars installed. Some of them add crap to the user-agent string and it that gets too long I seem to remember IE will truncate it. This can confuse the adaptive rendering "feature" on .net 1.1 sites.
Oh, and make sure you've validated your CSS :)