What is Reddit's opinion of
Firefox Developer Tools?
From 3.5 billion Reddit comments
➔ Firefox Developer Tools website
By popularity on Reddit, this Service is:
100 reviews of this app found across Reddit:
Since your question is honest and everything bellow is bollucks.
1) Firefox comes with dev tools, hitting F12 will bring them up. Use the inspector function and highlight the ad. Reading through the code a little bit you will see a website URL.
2) Open your CMD to perform a nslookup Save that IP address for step 3.
3) Edit your Hosts file to block websites
Done.
Use the Browser Toolbox to find out the initiator. The newtab has articles recommended by pocket in some locales, for example, and this is controlled by newtab prefs which don't include "pocket" in their names.
For Firefox users: the Firefox developer tools also have an excellent grid inspector that is very helpful in understanding CSS Grid.
Fair warning, it's pretty rough right now. If you want to try our Firefox OS, and don't mind losing the ability to call/text, I'd recommend the Simulator, which runs as an extension in Firefox.
Chrome and Firefox both have the ability to throttle network requests to simulate various levels of slow internet.
Chrome: https://css-tricks.com/throttling-the-network/
Firefox: https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Throttling
It's responsive design mode or mobile emulation mode, using F12.
firefox: https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode
chrome: https://developer.chrome.com/docs/devtools/device-mode/
If you want to get really crazy, try out the Firefox 3D DOM viewer.
Sometimes I even prefer it over the normal FF/Chrome inspectors when there are a lot of nested, but similarly-sized elements.
I see people speaking highly of their experiences with Firefox recently but I cannot relate.
1) Despite what others say, it slows to a crawl for me when I have more than 20 tabs open and it chokes on javascript heavy pages.
2) Doesn't pay well with dark gtk themes. It picks up some of the values, but not all. It really sucks when I have a text input with a dark background and black text (because Firefox is letting gtk color the input background while CSS is dictating "#000" for the font-color).
3) Dev tools are lacking. They made some great advancements, and their dark UI is beautiful... but I can't do a simple thing like delete individual cookies (which I can easily do in the chrome resources tab of dev tools)
Most devs I know that use Firefox will use Firebug with it. Which seems ridiculous to me, installing dev tools on top of the native dev tools.
Also, the old lead from Firebug was hired by Chrome. Probably one of the reasons they are so awesome.
I just want to mention my speed comparsions are with an i7 with 16gb of RAM. So it's not a hardware limitation.
> Like if I have 1000 shoes
Aaand... doesn't matter. With an N that small, you can do the dumbest thing imaginable and you'd be still done in less than 1 ms.
In general, if you don't have any points of reference for what you're trying to do, just go with the most straightforward most convenient approach. Get it to work first. Once it works correctly, see if it feels sluggish (it probably won't). If so, profile it to figure out where the actual bottlenecks are (they are probably in a different part of your application).
https://developer.chrome.com/devtools/docs/cpu-profiling
https://developer.mozilla.org/en-US/docs/Tools/Performance
If you guess how fast something might be, you're generally wrong. And if you write micro benchmarks, you're typically measuring the wrong thing. Writing good benchmarks is actually surprisingly difficult. Even VM engineers can't accurately tell what some micro benchmark is measuring without using special tools to take a closer look.
Conveniently, you only care about the performance of your actual application. So, profiling it with your actual real-world data is the best thing you can do. The application itself is the most relevant benchmark there could be.
See also:
https://www.reddit.com/r/javascript/comments/3uuk17/performance_and_benchmarking_issues_with_jsperf/
I primarily learned from w3schools to get started but then once I had a decent understanding of JavaScript I moved to MDN. MDN is basically the documentation for the web. It's probably the best source their is. If you want to learn by coding then you can do so in the browser. The browser's dev tools has a console that you can type JavaScript into. I highly, highly, recommend you get very comfortable with the dev tools. Now-a-days I'd probably just recommend purely learning though dev tools and MDN.
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps
https://developers.google.com/web/tools/chrome-devtools/ https://developer.mozilla.org/en-US/docs/Tools Focus on the Sources, Console and Elements panels. Performance and Network will be good follow ups but wont be TOO helpful during initial learning.
Which cookie?
I clear cookies every time I close my browser, but I whitelist reddit.com. Yet, for some reason, the pop-up is there every... single... time.
edit: it isn't stored in a cookie. It's stored in local storage. Which yes, I clear every time.
Why in the world was it stored there instead of in a cookie? Sheesh.
For most browsers, F12 will open up the developer tools Navigate to the console tab and paste 'AddFreeLicense(230235)' without the quotation to add the game to your steam library https://developer.mozilla.org/en-US/docs/Tools
Actually I already have a backend for my language that targets C (I started with that one) and one that targets LLVM. Both work, but I'm kind of regretting creating the LLVM one.
The C code I'm generating is pretty clean and pleasant to read. Surely much more than the LLVM IR.
- I'm not abusing parenthesis: they're only output where the operator precedence doesn't match the AST.
- The name mangling scheme is pleasant to read. For global symbols, it starts with my language's tag, then two underscores, then each namespace separated by two underscores, then the actual name of the entity. For local variables it uses the same name as in my source language, or a name I placed in the compiler, appending an underscore followed by a number in case that multiple local variables have the same name (that happens rarely though: the code generator creates local blocks whenever possible and variables local to different blocks don't collide).
- I'm outputting in C (most) comments and empty lines from the source language.
- The generated code is properly indented and linted.
- I'm generating a source map to easily map an expression in the generated C code to the one in my source.
My LLVM code generator, as a comparison, is a more complicated codebase, I've had bugs in the code generation more often, the generated IR code is much harder to read and it's platform-dependent: it needs to be re-generated differently for different target systems.
​
Overall I much prefer the C backend. I would like to introduce some optimizations that can't be expressed in C though. But giving up all the nice perks of the C backend only for this seems like a bad choice...
Seriously? I always thought Firefox was way better than the rest. I especially love Scratchpad. Is this available on Google Chrome as well?
Yes. First enable the Browser Toolbox: https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox
Then do these steps:
- Open the Browser Toolbox (CTRL + SHIFT + ALT + I)
- Press the button with the 4 squares at the top right of the Browser Toolbox.
- Press the Element Picker (first Button on the top left of the Browser Toolbox)
- Click on the element in the Browser you want to inspect, and it will be selected in the Browser Toolbox.
- To be able to use Firefox as before, you need to disable the 4 sqaure button again, as in step 2
Enable Responsive Design Mode and then either chose a virtual device viewport from the pre-sets or create one or more custom devices with the display configuration that you want.
This feature was removed because it was unmaintained and mostly broken. Pretty much all it was ever used for was the screenshot tool.
The screenshot feature was moved to normal developer tools though which you can open with Ctrl+Shift+K. From there you do :screenshot --fullpage and it should work the same.
Dont forget about responsive design view to see how sites look at any screen resolution and the command line to launch any built in tool.
It's not supported, except through the about:debugging page or the web-ext program.
The userChrome.css that I used to style unread tabs no longer works in Firefox 61 :(
.tabbrowser-tab[unread] { font-style: italic; }
Anyone worked out an alternative yet?
Using the Browser Toolbox I found a property called notselectedsinceload which I was hopeful for, but that doesn't seem to work either, as the tab then never reverts to its normal state after it's been read.
Being able to identify unread tabs makes a massive difference to the way I use the browser, I really hope it's possible to do this somehow in Firefox 61 and onwards.
Apparently Ctrl-Shift-Q used to be the shortcut for opening the Network Monitor, at least before Firefox 55, but... why they'd change it to quit the application is confusing
I think you're looking for the Highlight matched elements button, see
See https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS
> Highlight matched elements: next to the selector is a target icon: click this to highlight all nodes in the page that match this selector.
...
> Starting in Firefox 52, this also gets the target icon: xxx , giving you a convenient way to highlight the currently selected element in the page.
The docs also have a video for this: https://www.youtube.com/watch?v=bQzOAFvEDco
Probably, a good idea to look deeper into the DevTools: https://developer.mozilla.org/en-US/docs/Tools Many features, lots of them useful, but sometimes a bit hidden.
You can find the selector for that element if you use the Browser Tool Box (see here how to access it).
But in this case, you need this custom CSS:
#sidebar-header { background: #333; border-right: 1px solid #333; border-bottom: 1px solid #333 !important; }
As for the scrollbar, I think that's not as trival to change because it's the OS who renders them...
>How do I get the id of the addon I am targeting?
- Enable Browser Toolbox if you haven't done so already.
- For debugging popups, click the icon that looks like 4 squares on the top right.
- Switch to the browser window, right click somewhere to make the context menu show up.
- Switch back to the Browser Toolbox, click the icon on the top left that looks like a pointer over a rectangle.
- Now move your pointer to the context menu item whose ID you want to find out. It should get highlighted with a red border.
- Switch back to the Browser Toolbox. The left hand pane should have a selected entry that should give you the required ID.
If this sounds like too much work, you can instead directly use labels. So for e.g., if you want to find out the ID for say the 'View Image' item, then instead of going through all the above steps, just use menuitem[label="View Image"]. For a submenu, e.g. 'Send Tab to Device', use menu[label="Send Tab to Device".
>but what if all I want to do is place 1 addon at the very bottom of my context menu? I have to list every single addon in their desired order
No. If you want to move an item to the very top, just give it a -moz-box-ordinal-group: 0, without doing anything for any other item. If you want to move an item to the very bottom, use -moz-box-ordinal-group: 2, again, without doing anything for any other item.
If you want to move multiple items to the very bottom, then give only these items increasing -moz-box-ordinal-group e.g. 2, 3, 20 and so on. If you give all of these the same number, then while they will stick together at the bottom, they might rearrange amongst themselves depending on when and how they are being added / removed.
If you go to that website, press shift+F9 to open Storage Inspector, expand 'Local Storage' in the left pane, and click on the https://allegro.pl entry, you can see an array called recentlyTypedPhrases containing all of your, well, recently typed phrases.
You can delete it through the Storage Inspector itself, or by pressing ctrl+shift+del and checking 'Offline Website Data' (this will delete it for all websites).
Except it's not even in Firefox yet, so your condescending attitude makes you look like an idiot for not even knowing the answer yourself. AFAIK the only way to do it in Firefox is through plugins. Source
Yes - https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox
"The Browser Toolbox enables you to debug add-ons and the browser's own JavaScript code rather than just web pages like the normal Toolbox. The Browser Toolbox's context is the whole browser rather than just single page on a single tab."
I think they went a bit overboard with the marketing on this one. Here is some less glossy info on "Valence".
Basically Firefox isn't emulating anything, in the example he is just using Apple's iOS Simulator - the tool can connect to actual iOS devices as well. It allows you to use the Firefox developer tools with other browsers (Safari on iOS and Chrome on android).
Opera 12 had something similar that allowed you to inspect remote devices running Opera (mobile apps and TVs).
Huh, maybe the new version is just a Windows (and I think mac too) thing. Microphone use is indicated by a icon in the taskbar tray area.
Anyway, that old thing is a separate Firefox window, so you should be able to modify it. It's just what do you intend to do with it? You can use browser toolbox to inspect that window, while open click the "iframe selector" button in the toolbox toolbar and activate a document corresponding to the indicator thing. I can't remember what it's url is but probably something with "indicator" in its name. After you find it, you can inspect it like you would inspect any document to figure out how to do what you want.
If you really feel that each update forces you to tweak stuff (I don't see that myself but whatever) then you should probably do yourself a favor and learn a tiny bit about how to use the browser toolbox to figure out how things are styled.
That is especially important since you appear to be using some custom tab styling that could colorize the tabs any number of ways that and we have no idea how it does that.
Ad blockers in Firefox can block more on web pages because Firefox gives extensions more control over webpages than Chrome.
So, first off, you'd have to try both w/o an ad blocker to compare the 2.
If you go to the Developer Tools > network monitor and see the amount of traffic, review the console for errors, and truly look at how they behave differently when processing the page, those can maybe help with seeing why they may hang or block different amounts of things.
https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor
As long as your your inner browser frame adjusts to the window size your session can always somehow be fingerprinted. It's not just a simple "return a fake value from a JavaScript function" sort of thing. Your whole layout changes and with it all sorts of values. If preventing fingerprinting is important to you you should not want that.
If the frame of the website doesn't get adjusted however there is no real point in resizing the window.
| I prefer using a tiling manager
Well, okay. I take it back. That's the only reason I can think of though. In that case I suggest using Responsive Design Mode. Which is a Firefox Dev Tool to test how websites look on different devices. The frame of the page will be set to a static screen size independently to your window size: https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode
FYI: The screenshot button is not enabled by default. Here’s how to turn it on.
^Edit After trying it, I can say that this works well. You can even take screenshots of just an individual element of a page. I’m ditching the browser extension I used before just for full-page screenshots.
Good question. JavaScript is often minified (rewritten to take less space) before being transmitted to the browser, but when you're debugging it's much handier to have the original source location available. Source maps provide the link between the pre- and post-minified worlds.
It's the document.write(...) that causes this. Details can be read on MDN.
> Once you have finished writing, it is recommended to call document.close(), to tell the browser to finish loading the page
It's possible that some browsers automatically close the document for you, so they don't show the page as loading.
In general though, document.write should never be used for a real page. If you call it on a page that has already been loaded, the document will be wiped first. That is why your input button disappears. If you want to display the results of your script, try the console (F12). It's more versatile.
Screenshot button in developer tools: https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Extra_tools
Windows Print Screen: http://windows.microsoft.com/en-us/windows/take-screen-capture-print-screen#take-screen-capture-print-screen=windows-8
Mac OS X: https://support.apple.com/en-us/HT201361
Ctrl+Shift+I -> Switch to Console tab -> This is similar to what Chrome provides you. It might appear that you can just enter one line but press Shift+Enter to enter multi-line.
Plus in FF, you get Scratchpad. Press Shift+F4, this is a rough version of js editor in FF. Shift+Space to autocomplete, Ctrl+R to run here are more shortcuts
If you're not seeing output then open Browser Console (Ctrl+Shift+J). This is different than just Console (Ctrl+Shift+I) in FF.
in userChrome.css:
#customization-container { background-color: #222 !important; background-image: none !important; }
#customization-footer { border: none !important; background-color: #333 !important; }
if you wanna change the other elements, e.g. buttons, see my stylesheet. you won't be able to use those ::part(*) selectors in your userchrome file, jsyk. the others will work fine but the selectors that say ::part won't work, so delete them if you're gonna use the rules in that sheet. if you want to change buttons, popups, etc. on this page, well if I were you I'd open the browser toolbox and use the element picker to select the elements you want to change. and if there's anything under/inside a #shadow-root node in the inspector that you really want to change, ask me again about it, I'll explain how to do it.
In Browser Toolbox open the Style Editor -tab. It should list all the internal CSS files (and unfortunately for you it may also show some others).
On an element-byelement level you can use the Inspector tab to select some element and then in the side-panel select the "Computed" tab (instead of Rules) and inside it check the "Browser Styles" checkbox. Then it should show you all the properties that the particular element has.
This is pretty awesome, for anyone else that can't find the option I had to modify about:config and restart firefox. (could be because I have a super old firefox profile though). See https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector/Simulation
The only hindrance is the static header and/or footer that gets on the way if said site has any.
which can easily be removed with the Zapper tool or the Developer Tools.
when i check on my windows machine, the ping to the update server contains information about my current firefox (version, build, 32/64bits, language, release channel) and information about my system (windows version, cpu instruction set, amount of ram) - nothing here is close to a device id/fingerprint and all seems to be for the purpose of providing the correct update package for my setup.
you can see this yourself by opening the browser console and looking at network requests while you check for updates: https://developer.mozilla.org/en-US/docs/Tools/Browser_Console
> Looks up a CSS selector string selector, returning an array of DOM nodes descended from element that match. If unspecified, element defaults to document. This is like for <code>document.querySelectorAll()</code>, but returns an array instead of a <code>NodeList</code>.
TIL too
On website == actually 2 distinct parts, the backend and the frontend that runs in your browser. The browser can only run JS (and recently WebAssembly) but many languages can be transpiled to JS. So unless the website offers source maps you can really only guess or assume it's done with just JS.
For the backend the situation isn't any more clear. You only receive HTTP messages, with HTTP being a language-agnostic protocol for which there really are implementations in any language. Your best guess are heuristics since some HTTP backends behave in a certain way. For example if paths such as /typo3/ or /fileadmin/ are available it is extremely likely the backend uses TYPO3 which is built upon PHP. Similar specific aspects are known for a lot of reused CMSs/eCommerce platforms, some frameworks etc. But if a website does not expose such information you really cannot know which language it uses for the backend other than by asking the authors.
For that top border, try this:
:root:-moz-lwtheme { /Properties for the layout Firefox uses when custom themes are enabled/ --toolbox-border-bottom-color: rgba(0,0,0,.0) !important; /Disabling the random divider line that's present when using custom themes/ }
#nav-bar { /Entire Main Toolbar containing address bar, search bar, add-on icons/ box-shadow: none !important; /Starting with Firefox 58, this is needed in addition to :root:moz-lwtheme to disable the divider/ }
Not totally sure about the bottom border, but you could probably it track down using the Browser Toolbox.
To see all IDs, you can open the Browser Toolbox, and inspect everything. You can also see IDs from popups using this trick: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Debugging#Debugging_popups
Remote debugging over wifi. I'm surprised at how much less of a hassle it is to not have to plug my mobile device into USB, even if I have to scan a QC code.
Seeing that little "ev" label beside elements with listeners on them in the inspector. Useful info at-a-glance, without having to click on elements and check their "listeners" tab (that said, I wish I could easily remove listeners for testing, like I can in Chrome). The font panel is similarly nice, though it could be even more useful.
The Storage tab, Shader Editor, Canvas inspector, Web Audio inspector. They've all come in handy for various projects I've been a part of.
The Developer Toolbar. It has a number of neat little features that very few people seem to know about.
My friend who does web testing for a living finds Firefox's responsive design mode easier to use and more accurate, though he wishes they would integrate a better UI for user-agent manipulation, or at least fix it so that changing the UA doesn't require loading a new tab for it to take effect.
There's also the ability to emulate :hover, :active and :focus on elements in the inspector, unlike Chrome which only offers :hover.
You could use the network monitor from Firefox's developer tools and the equivalent functionality of Chromium to compare what they are doing (which requests are sent and what headers do they have).
Not in the UI, but you can do that through the developer console (how to open in Chrome/Firefox).
Here's what you need to put in:
var scope = angular.element(document.querySelector("[ng-controller='MainController']")).scope(); scope.forecast = scope.forecastPoop(100, 0); scope.$digest()
You can replace 100 and 0. The place for 100 is number of days before today, and the place for 0 is days to "forecast" (using polynomial regression).
Perhaps you can download the relevant files from the source code site into a folder, and then use the about:debugging page to test changes to that manifest.json:
No, not really a list, but you can use browser toolbox to find fitting selectors for just about anything.
For menu items though, you can also usually use the label of the menu item to create a selector, like this:
menuitem[label="Close Tab"] would match menuitems that have label "Close Tab". And for the thing you asked you could thus also use menu[label="Close Multiple Tabs"] instead of the element id.
Note, its menu if the element opens a sub menu, and menuitem if it is a single item.
> Can someone provide an updated one or point in the right direction?
Have you tried using element picker?
Or you could inspect element to share/screenshot the responsible code - no donations prompts on my side.
You would use browser toolbox to figure out selectors to use in your CSS. A list that you would want would be impossible to create since it would be practically infinite.
Firefox has a feature that allows you to see what's causing the overflow https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Debug_Scrollable_Overflow really useful!
There's also Chrome Pesticide extension.
I'm guessing this would work, but it really depends on how you are doing your custom styling:
:root{ --tab-block-margin: 0 !important; } .tabbrowser-tab{ padding-inline: 0 !important; } .tab-context-line{ display: none !important; } .tab-background{ border-block: 2px solid var(--identity-icon-color,transparent) !important; }
You can figure out this and more using browser toolbox
> Is it possible to catch the css for example the one in the version 88. And then use it as userChrome?
Well, technically yes but the internal styles are thousands of lines of CSS. And, it would still not be the same still because CSS is just descriptions to how to show the document structure. But the document structure was changed and there's absolutely nothing you can do to that with CSS.
> Also, is there any way to debug firefox interface to get objects ids and tags to update them css?
Of course. Browser toolbox
> This objects names changes between updates?
Yes, the document structure (DOM) was changed somewhat.
> Do i have to make copies of userChrome before updates?
No, Firefox never writes anything to userChrome.css. I mean there's no harm backing it up but it's not required by any means.
> And one last question bit related, does the other firefox have sync, the wich one maked for maintenance business. And if do, is a big change between firefox?
Do you mean Firefox ESR (Extended Suppot Release)? Yes, I believe it has sync. I believe the old ESR cycle is nearing it's end so right now there should be two ESR releases - the old one is based on Firefox 78 and the new one is based on 91. Support for the old 78 ends in a few months though I think. "Normal" Firefox 91 and ESR 91 should be pretty much identical for the user.
what mods do you use exactly? you should read the tutorials on using the browser toolbox, it would take you 45 seconds to answer the question yourself haha rather than 17 hours of waiting for someone to stumble on your post. anyway you can find all the selectors and the downloads button styles in this stylesheet. personally I think scanning the inspector is a lot easier than deciphering the raw stylesheet, but it's there if you need it.
if you updated recently and have old CSS for the downloads button, it's probably because of the proton update to the downloads button. if I were you I'd just delete all your CSS related to the downloads button and start over, since they completely overhauled the appearance of the downloads button. you can still restore it to its old appearance if you want, I wrote a script just for that, but setting that up is a bit more complicated than CSS, so if you don't mind the new appearance I'd suggest just rolling with it.
Use browser toolbox to find the ID of the button you want to modify and then just override its list-style-image property:
#bookmarks-menu-button { list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !important; }
Just wondering if you have ever tried to use the Browser Toolbox tool?
It's quite helpful in learning and customizing what you would like.
https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox
- For editing css without leaving the browser you can use Browser Toolbox. Use this for more info. When you are in Browser Toolbox go to Style Editor and scroll-down to userChrome.css. Edits made here will be istant.
- Make your own theme with css because it will last long. If they are not working then you need to update them.
Use Browser Toolbox instead which also allows live-editing userChrome.css
Popup elements (including menuitems) can be found easily by disabling popup autohide (there is a toggle for this under the toolbox options button)
The only way to access is probably using webIDE. Adb won't allow access without root. Or maybe try a light emulator like genymotion.
The font used on Windows 10 is Segoe UI.
Enable and use Browser Toolbox to inspect the UI and what font is used, as well as what CSS you need to override with userChrome.css.
If the font is correct and you still do not find it to render correctly (as on Windows), that might have to do with there being specific CSS for different operating systems. The OS font renderer might also play a role here.
That is the correct size and weight of the font on the new design of YouTube.
I just use another profile for testing. Google.
The Browser tool box is how you find the id/class...
I have this specifically for GitHub in my userChrome.css file:
.tabbrowser-tab[image^="data:image/x-icon;base64,AAABAAIAEBAAAAEAIAAoBQAAJgAAACAgAAABACAAKBQAAE4FAAAoAAAAEAAAACAAAAABACAAAAAAAAAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABERE3YTExPFDg4OEgAAAAAAAAAADw8PERERFLETExNpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQUFJYTExT8ExMU7QAAABkAAAAAAAAAAAAAABgVFRf/FRUX/xERE4UAAAAAAAAAAAAAAAAAAAAAAAAAABEREsETExTuERERHh"] .tab-icon-image { filter: invert(1) !important; }
For other sites, you'll have to find the image data using the Browser Toolbox and inspect the tab's icon and look for an attribute that begins with "data:image". Copy the first few hundred characters out of it, and then use it modify the GitHub example above. Also, if your dark icon has color it in try filter: invert(1) hue-rotate(180deg) !important; or force it to inverted grayscale with filter: invert(1) grayscale(1) !important; (see CSS filters on MDN for more info).
Edit: As an alternative you could just force the background color to white (or other bright color) with the following:
.tab-icon-image { background-color: #fff !important; }
Hi Melon,
when changing the class of the button from red to green you're not actually changing the colour. If you add the red class back and right click -> inspect element, you can see all the styles listed in your browser.
Example with firefox inspector: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector
You can edit that file in the Browser Toolbox for live change. For that you need to go to the Style Editor, chose the file on the left list and edit it.
1) somewhat possible but I'm not sure how much you'll gain from it; add these two selectors to list of selectors that set bottom margin to 0
#navigator-toolbox:not(:focus) > #nav-bar:hover, #navigator-toolbox:not(:focus) > #toolbar-menubar:hover ~ #nav-bar,
2) Definitely sounds possible but it entirely depends on what those separators actually are. tollbarseparator -elements are ones that you were able to put there in the past. However, I don't think they can anymore, so I wonder if you separators are actually something else, like perhaps they are just a border on some button. You would need to find this out using browser toolbox
To submit the form using requests, you can do this:
import requests url = 'https://my.yrc.com/dynamic/national/servlet?CONTROLLER=com.rdwy.ec.rexcommon.proxy.http.controller.PublicProxyController&redir=/tfd616' r = requests.post(url, data = {'INQDATE':'04/10/2018', 'AGENT': 'RDWY'})
This returns the same data as submitting the form in the browser, which you can access through the text attribute of the Response object, in this case r.text. From there, you can now use BeautifulSoup to extract the individual fields in the table.
By the way, I discovered the names of the input form fields, and the values for the dropdown menu, by using the Page Inspector in Firefox.
Use the browser toolbox and take a look at the various scrollbars.css files in there to get started. You can't inspect the structure of scrollbars but you can figure out how to use the selectors from there.
Here's some floating scrollbar CSS which I'm going to look in to moving to this implementation.
> The menu items in green, how do I find the names referencing them and remove them?
Use the Browser Toolbox to find the selectors (specifically 'Debugging popups' near the end).
The responsive design mode in Firefox sets the User-Agent HTTP request header to identify itself as the default browser on the selected device.
https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode
Firefox's Edit and Resend is definitely a sweet feature. Wouldn't be surprised to see it in Chrome within the next few months.
You can try it out on:
1. The desktop by using the FxOS Simulator
2. On an Android phone by using b2gdroid.
If you want to try it out on real hardware look around on eBay.
Perhaps WebIDE by Mozilla? I haven't tried it too extensively and it's slanted towards Firefox OS mainly, but I can imagine it to work pretty well outside that as well, and Firefox's developer tools are pretty good. Chromium's developer tools have supposedly evolved in the direction of a full-fledged IDE as well.
Perhaps a bit unconvential, but if you're desperate, you might want to at least give them a try :)
You used the WebIDE at some point. They are installed to make debugging Firefox for Android and Firefox OS as well as other webkit based browsers possible.
The extensions are not installed as part of a default install.
A while back I was still using the aging DOM Inspector extension myself. But it turns out FireFox has a really nice tool build in.
https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox#Debugging_chrome_and_about_pages
Here's what's happening: After you click cancel, the textbox that you were typing in is hidden, but it's still on the page with all of your text in it. We just make it invisible. If you click 'reply' again, we just make it visible. You can verify this using chrome's devtools, firefox's inspector, or whatever tools your browser has for inspecting what's going on 'under the hood'. The text is never sent to our servers until you click save.
Have you tried stepping through the code to see what exactly is happening?
In Chrome: https://developer.chrome.com/devtools/docs/javascript-debugging
In Firefox: https://developer.mozilla.org/en-US/docs/Tools/Debugger
And since you're initializing temp to 2, you could at least take out the -1 and 2 cases.
Ah... touche. I guess I was more focused on the different resolution aspect. What about Valence?
Firefox Development (Android/iOS), Safari (iOS, bit old but should still work like that) and then there is weinre which works even with Windows Phone although based on today's experience I had it didn't really work that well.
2 options:
- Ctrl-Shift-M: Starts responsive design (https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View) - from here, there's a screenshot button
- Ctrl-Shift-i: Starts the devtools. In the devtools options, you can enable a screenshot button, that will appear in the devtools toolbar
These files are called source maps and they let debuggers (like the debugger in a browser dev tools) step through the original code instead of the transpiled code when you're debugging.
A link to the source map is included in the "compiled" js file (https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map), you could try adding access restriction to source map url's in your proxy server, either use the default location or move the source map files to some other location (in which case you may need to update the "compiled" file).
In Apache you may restrict access by adding Require ip in a Location or a LocationMatch directive, I have little to none experience with nginx, sorry.
You may take a look at https://itnext.io/using-sourcemaps-on-production-without-revealing-the-source-code-%EF%B8%8F-d41e78e20c89.
If you open the javascript console in your web browser and then load the page, do you see any errors there (they'd be red text)? Add a screenshot of those if you see anything there.
Here are instructions to get to the console in Firefox: https://developer.mozilla.org/en-US/docs/Tools/Browser_Console
.search-wrapper .logo-and-wordmark .logo -> userContent.css inspect with Toolbox
filter: grayscale(1); -> common css
Browser UI userChrome.css debug with Browser Toolbox
Hier gibt's noch eine Mailbox, BLUP BBS.
Im Firefox kannst Du Throttling einschalten. "GPRS" dürfte der Dialup-Geschwindigkeit am Nächsten kommen. Das sollte dann erklären, warum es heute wohl keine DFÜ-Einwahlknoten mehr gibt. 50 Kbps sind ein Hundertstel von 5 Mbps, und selbst das ist heute schon eher langsam.
> Why doesn't the core.js script get blocked when I manually reload the page? It only gets blocked when I'm navigating between pages be clicking links in the report panel.
Just because the website doesn't break on refresh, doesn't mean the script isn't blocked.
You can confirm it with the Logger and/or your browser's network monitor.
My guess is that's what's breaking the website is a navigation event tied to the blocked resource which would explain why it's not being triggered on refresh.
Using browser tools looks like there are two URLs you'd want to use:
Start the export:
https://api.nextdns.io/configurations/:id/logs/export- Returns JSON with a UTC timestamp: e.g.
{ "timestamp": "2021-09-18T04:48:27Z" }
- Returns JSON with a UTC timestamp: e.g.
Download the export with the timestamp in the URL:
https://api.nextdns.io/configurations/:id/logs/download/2021-09-18T04:48:27Z
Not sure if you're asking whether it's currently possible or proposing this as a new feature...
In case of the former, it's not possible with uBO. Try https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor
In case of the latter, I don't think it's gonna be implemented as gorhill likes to keep the popup minimalistic, IIRC.
You can see the blocked request in both the browser's network monitor and in uBO's logger.
Browser toolbox is the tool to use. It's like inspecting the Firefox UI with a special version of the website inspector (and other devtools), so you will find all the properties, attributes, classes etc. good stuff with it.
You can use browser toolbox to find out how to target it. You would find that you could hide it with #star-button-box{ display: none }
Welcome!
With CSS you can modify how the browser UI looks like - you can modify it's layout. So, you can modify the color and size of elements and to some extent their position. An element is for example a toolbar (there are several toolbars), a toolbar element contains several button elements etc.
So, with CSS you can change how the existing elements are presented in the UI, but you cannot create new elements or change what the existing elements do.
The first step is obviously to figure out what you want to do. But suppose you have that, then the next step is to figure out how. For that, there is browser toolbox - yes, I know it might be a bit intimidating at first, but you can't really avoid getting your hands dirty if your intention is to learn internal styling of a very complicated piece of software.
Browser toolbox will help you figure things out.
You should find that it is #PopupSearchAutoComplete. But, since it uses a shadow tree the method to change its background might not be so obvious - this should work though:
#PopupSearchAutoComplete{ --panel-background: #f00 !important; }
I saw a video recently where you can either use Chrome or Firefox devtools to do them easily. Firefox has them natively https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes and Chrome has an extension https://chrome.google.com/webstore/detail/css-shapes-editor/nenndldnbcncjmeacmnondmkkfedmgmp.
By separating the tasks and knowing the techniques you can use, this demo is simple to make. Not discounting OP’s skill (even I haven’t done something like this), but it makes it feel doable just by reverse engineering the code and planning out steps.
no you didn't, you need to hit ctrl + shift + i. that stuff is in the content area, not in browser.xhtml. you use the content toolbox, not the browser toolbox. ctrl + shift + i, not ctrl + shift + alt + i. the css goes in userContent.css not userChrome.css. you should read the tutorials first