I'm a mid level website designer and manager for clients sites and I know just enough HTML/CSS to be dangerous. I use the Chrome developer tools to see where I can make CSS changes primarily.
Now for some reason, the debugging tool pauses no matter what I do. I've turned off the pause button, but it makes no difference. Has anyone else had this issue? Do I have a virus or something?
I'm trying to make CSS changes to a Wordpress login page and I can't even get it to react to my changes so I can see what I like.
Thanks in advance for any help. Here is my ugly login page that I need to fix:
http://tracoutdoor.com/wp-login.php
It sounds like your debugger may be set to break on exceptions automatically. If you open the dev tools and click the Sources tab and look at the right hand menu, ensure both the Breakpoints and Exceptions icons are greyed out (not blue) like below:
Also ensure there are no breakpoints set in the Breakpoints section.
Related
I can't preview my Google Optimize experience. Google optimize throws below error:
This happens to me quite often too. The suggestion Google gives is wrong. Clearing cookies and restarting the browser does not fix it. Sometimes rebooting does, but that's a huge disruption.
What I found to work pretty reliably is to end the preview (dropdown), then click the EDIT button to go to the editor. Come back to the setup page, then try Debug again. Debugger should work again.
This is how it worked for me:
In Chrome go to Clear Browsing Data (chrome://settings/clearBrowserData).
Make sure you select checkboxes Cookies and Cached images and files.
Submit the form by hitting the button "Clear data".
Go to preview experience.
For me it started working when I gave the Google Optimize plugin access to all pages (not just the page running the experience).
I think I've found a fix for this. Go to the top right corner of chrome (the three dots) Settings > Privacy & Security > Cookies & other data > and add the url in the bottom section called "sites that can always use cookies"
Example
There can be multiple reasons.
Most obvious: enabled cookies like mentioned by others. should help
If it does not work even when cookies are enabled and you have restarted the browser then more chances are that the issue is in the Experience/Test that you are trying to preview. This can be due to:
A preview is already running in another tab. Turn off preview
2.You have set the experience to run on certain URL patterns and you are trying to preview on a page that does not qualify the criteria.
You have set some Audience rules which are not being met fully. For example: You have set the Audience Device type to mobile and you are trying to preview on a Desktop. Although Optimize will load the preview in a mobile mode but it will not be able to run the experience properly.
In my case the issue was due to wrong device type. I hope it helps.
It's also possible to get this "Unable to preview experience. Please make sure to enable cookies and restart the browser" error message if the content you're trying to modify doesn't exist when Optimize tries to modify it.
I had Optimize set to modify on page load, but the page I was working with was a form, where the text I wanted to modify didn't exist until I clicked through to the second step of the form (still on the same URL).
I was able to just run the study instead on another similar page that had all the text loaded at the start. I'd guess that setting Optimize to trigger from a custom event triggered upon loading the second step of the form instead of "on page load" would also have resolved the issue.
If you are using chrome then:
Click the context menu in the browser toolbar to the right of the
address bar.
Choose Settings.
Select/Search the "Security and Privacy" section.
Choose "Cookies and Other Site Data" Ensure that "Allow all cookies" is selected.
Title may be confusing because I don't know how to explain that in words. When we use JavaScript debugger in WebStorm and edit and html file, it colorizes the block when the cursor on it.
It is really confuses me specially when I change something about the design. Is there any way to turn of this feature completely. I'm digging the app, searching at google but nothing found yet
Please try disabling Highlight current element in browser on caret change checkbox in Settings | Build, Execution, Deployment | Debugger | Live Edit
See https://www.jetbrains.com/help/webstorm/2020.1/live-editing.html
Suddenly (today) not all stylesheet of my website http://k-dushi.com/index.php show up in developer tools (Firefox). It looks like it keeps trying to load stylesheets (loading icon keeps spinning). Also it seems that some styles to make the website responsive are not loaded properly. Does anyone have a clue how to fix this? I have been trying so many things and am really out of ideas.
Thank you!
Close the developer tools and then re-open the stylesheet editor (shift + f7). Does the job for me.
Also the problem occurs only with a live internet connection, although all the stylesheets are loaded properly. So, go offline and its all fine again.
I hate Firefox, I really do, but as a web developer I'm chained to it b/c of the robust set of tools that Firebug offers. Recently Chrome and Safari's inspection tools allowed users to edit full chunks structural code (in a very buggy manner), but you still can't edit full stylesheets. Usually when someone brings this up, Chrome and Safari developers say "BUT YOU CAN EDIT CSS," and that's true, to an extent. You can edit CSS property-by-property (which takes forever if you have a lot of changes) in both browsers, but there is no way to see the full computed stylesheet, make edits within it, and immediately see the results. To date, only a full install of Firebug on Firefox allows you to do this.
Has there been any momentum in either of the Chrome or Safari camps to build a plugin to match this unparalleled function? Cheap plugins that allow you to insert CSS into the page are not the answer. It's really simple:
Have a list with the current stylesheets that are being referenced
Choose the one you want to edit, and click an edit button
See all the code in the stylesheet
Make changes and see them reflected on the page immediately
Is it really that hard to build something that does this? I think it must be, b/c why else would the developer communities of two browsers completely ignore it? If there's something out there that now offers this capability, I'd love to hear it; otherwise, maybe someone will step up to the plate and develop it for either Chrome or Safari. It seems like the guys who developed the CSS Edit app would be all over this.
Thanks to you I found it!
The Live Stylesheets extension for Chrome is what you are looking for. Be sure to restart Chrome after installation to use it.
You can edit external stylesheets in Chrome DevTools, too (since Chrome 15 or so). Just double-click the stylesheet contents in the Resources panel (or click the "Edit" button below), edit, Ctrl-S to commit a new revision, Esc to cancel editing. And it updates your page as you type!
You can edit your CSS files directly on Chrome without relying on any extension.
Here is how: Edit CSS files on the fly using Chrome DevTools
A different way to access it:
right click the page, select inspect
on the DevTools, click on "Sources"
locate the css on the "Network" pane and click it
change the css and save it ( by pressing ctrl+s )
I am developing a site that uses Google Chrome as its browser.
(Yes - I do not need to be compatible with any other browser - I guess I'm lucky as this is a feature requested by the user of the system ;-)
I am working on the layout of the screen in VS2008 and am changing the CSS files all the time.
I do not want to change my browsers settings and do not want to clear the cache.
All I need is a browser extension (icon) that when it is clicked re applies the CSS to the page after fetching the CSS from the server.
This functionality exists in the Web Developer extension but it adds some extra clicks I am trying to avoid.
Any ideas will be much appreciated as I am getting tired of all the extra clicks.
Thanks and enjoy life, Julian
I've been looking around for a Chrome extension that reloads CSS from the server without making the page "flickering".
Here's what I found:
J CSS Reload actually does the best job in my opinion, although it flickers sometimes. You can even set a keyboard shortcut at the bottom of chrome://extensions/ by clicking on "Keyboard shortcuts" (although this seems to cause flickering constantly).
CSS Refresh refreshes CSS, but causes flickering (when hitting CSS reload, then all CSS is gone until the CSS is refreshed which makes it hard to spot the differences between before and after CSS reload).
CSS Reloader doesn't work for me.
Another option to consider is LiveReload.js which auto-reloads your web-app while developing (not only CSS but also HTML, etc.). There's a free Chrome extension and for Rack applications (like Ruby On Rails) there's the great Rack LiveReload gem.
CSS Reloader extension: https://chrome.google.com/extensions/detail/dnfpcpfijpdhabaoieccoclghgplmpbd, just press f9 to reload (obviously after installing it :P).
Also checkout Web Developer extention
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
It has alot of great feature. One of them being able to reload the linked style sheets.