What are Reddit's favorite Web Debugger Apps?
Firefox Developer Tools
Charles
mitmproxy
Fiddler
Google Chrome Developer Tools
Live HTTP Headers
HTTP Debugger
Top Reddit reviews mentioning Web Debugger Apps:
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.
I was using an application for OSX called "Charles", which has some of the oddest branding I've seen:
It worked pretty well; I set up a whitelist so that only requests to our API would be allowed through, and I set it up to redirect all requests to that API to a local server I had set up (with the SSL certificate that would allow the request to go through, since they had moved to our SSL endpoints).
So, I wasn't able to sniff the traffic from their app directly (since it was using our own SSL endpoints), so I spun up a local server instead to log the request details and be able to develop this without alerting the author.
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
How are you with python?
Wouldn’t take much effort to find anything with a header of “content-type: video/mp4” or whatever it is we’re talking about here, and have python stash the response body somewhere. I’ve used this method for saving all kinds of stubborn shit. All the JavaScript trickery in the world isn’t gonna stop this.
Automate requests through the proxy with selenium, maybe?
One way I've seen this done is to use the Charles which sets up a proxy on your Mac to intercept and log requests. You can then change your Wifi settings on your iPhone to use the proxy as described here.
Its not a conspiracy to have you buy pro. Is anyone out there proficient with https://www.charlesproxy.com/ ? If you are and can send me the logs from your device while an ad like this is shown, it would go a long way to helping us get these fixed.
Use Fiddler to monitor network traffic of the app. It can also do HTTPS traffic decryption
I have Windows 10 Enterprise installed on a machine earlier today. Even with telemetry set to Full, the lights on my switch don't blink when I double-click on an image in Explorer.
I also set Windows to proxy HTTP/HTTPS to mitmproxy running on another computer, and I get no requests when opening images.
Independently of that, with telemetry fully disabled I still get some disappointing requests to bing.com and live.com when using the operating system. I'm not even logged into a Microsoft account.
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.
So I use Fiddler extensively for work and the way .matt is talking about it makes it sound like he doesn't know what he's talking about either.
>This isn't EGS enumerating processes, this is literally how tools like Procmon and Fiddler work, they have injected themselves into the running process. > ...
>This is how shared libraries work on Windows, and once again in this example he is showing Fiddler which is something he has injected into EGS, nothing here.
Fiddler is an HTTP debugging proxy. It doesn't "inject" itself into running processes at all. All it does is act as a man-in-the-middle proxy server so that it can inspect outgoing HTTP requests. That's it. Web traffic gets routed to it and then you can inspect it using the various views it offers, so you can see requests and responses. It can optionally be configured to debug/inspect HTTPS traffic as well, but you need to install a special root certificate in order to do this, otherwise the data remains encrypted and can't be read. I guess maybe .matt is just trying to simplify this explanation by saying it's being "injected" purposely?
That said, the screenshots being shared do look seriously misleading. If he's using Process Monitor to show that Fiddler is doing something, well sure, it's being used to inspect HTTP traffic from the Epic Launcher, but that's not nefarious behavior, that's exactly what the person running Fiddler wanted to do.
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.
Chrome Mobile Emulation is built right into your current version of Chrome! I recently started using it while developing and it has helped immensely with building responsive sites. On top of adapting to various viewport sizes you can do things like emulate touch events (click) and pinch to zoom (shift+click&drag). Check out the short demo video and read all about this tool which just needs enabled in the current version of Google Chrome!
It's only useful for specific situations, but HTTP debugging was a real game changer for me. I use Charles. Before I realised HTTP debugging was a thing, I would have to log the crap out of my HTTP requests to see what was coming back, so I could work out how to parse it. With Charles, you can see exactly what information is being sent to/from the server, which makes it much easier to identify issues.
Similarly useful is Paw. Useful for making & analysing requests & responses (with authentication etc) from your computer rather than having to perform the request in-app.
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?
I think I hurt my left hand.
They can be considered man-in-the-middle. The word attack may have been a bit strong though :D
https://www.charlesproxy.com/documentation/proxying/ssl-proxying/
I love wireshark. Used to use it when it was still Ethereal. GUI could do with some love though.
The sweet spot of this seems to be debugging the SSL configuration of your server. For everything else, I feel there are more convenient ways.
If you're just interested in the communication contents, just open chrome://net-internals/#events (or the devtools for a high level view). Works without any installation whatsoever, also on the stable versions. For actual debugging on the protocol level, I'd go for mitmproxy, which offers client/server replay etc. (I'm affiliated with the project - Burp, Fiddler, Charles, ZAP, ... would be great alternatives, so it's not about that).
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
Charles proxy has a nasty habit of not remove the proxy configurations when it's turned off on the mac. Some apps will retain the proxy settings by not all apps causes. This can cause issues with some vpn configurations. Charles proxy is supposed to automatically remove the proxy settings when you turn it off.
Honestly? vim and grep. A couple quick greps on an unfamiliar codebase usually gives me a good idea of how "smelly" it is security-wise, pull me out a list of http routes so I can see what looks interesting, etc.
As far as infosec-specific tools, maybe mitmproxy? It gives you the ability to replay HTTP requests with slight modifications. I think Firefox allows editing a request before resending in its network inspector but it didn't handle multipart encoded forms very well last time I used it. mitmproxy is also nicer because you can also write plugins to do things like automatically strip CSRF tokens out of proxied requests and replay them so you can quickly verify that all endpoints correctly mitigate CSRF.
Self-signed certs in general provide no security. If your client blindly accepts a self-signed cert, an attacker can trivially MITM the traffic [1] and record/alter any packets in either direction. It's no better than HTTP.
You /can/ securely use your own certs if you control the trusted certificate store on the client. That's generally not the case though.
Look into StartSSL and Let's Encrypt for no-cost certificates.
This is wrong. Check out
https://mitmproxy.org/doc/ssl.html
It allows you to sniff TLS/SSL. You simply need to create a self-signed certificate for the API's domain name, and then add that certificate to Android's certificate chain (a very common/easy process). The app will then trust mitmproxy which decrypts the connection for you in real-time (while proxying onwards to the real server)
Hmm, this one might be chrome only (or they just forgot to add it there), but console.table can be useful too.
- See how your site would look on an iPhone, Galaxy, and Kindle without having to buy them
- Touch gestures are also emulated
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 is actually available on the stable release of Chrome. From their documentation note it sounds like certain features of the component may only be available in Canary at this time.
https://developers.google.com/chrome-developer-tools/docs/mobile-emulation
Well, if it's a keylogger then it's sending data to the outside, I would just log all traffic for a while and see if I can find something fishy.
For specifically this issue, I would probably use fiddler: https://www.telerik.com/fiddler
But if you have a suspicious process and you want to see what it's doing, you can preview it with https://www.hex-rays.com/products/ida/support/download_freeware.shtml to see if it's storing all keystrokes maybe or something.
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
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.
Charles... You want Charles... https://www.charlesproxy.com
Follow the documentation for it, specifically follow the SSL proxy set up, and filter for 'pubads' and you should see the corresponding calls for google ads.
Almost certainly. mitmproxy does this. It will generate a new cert that you need to install on your device as trusted.
However, if an app is verifying the certificate itself against a list of known certain they provide, it could fail. Basically HSTS cert pinning. After all, it was designed to prevent MITM attacks.
No, the data is encrypted through TLS and both wireshark and tcp dump don't actively decrypt it.
To decrypt the data, you will need to get Niantic's TLS private key (highly unlikely to ever happen) or mitm the connection at runtime with a certificate you have the private key to. Try <code>mitmproxy</code>, it makes these things easy to do.
/u/larrysalibra, do you know about mitmproxy? It makes intercepting internet traffic (even HTTPS) much easier than sshing your router.
What's interesting to note here is not how much data Tantan is sending back to their servers, but that they're doing it without SSL. If you monitor Tinder traffic, you'll notice largely the same personal details (location, match data, distance, etc.) being transmitted – albeit via HTTPS.
Not sure what your goals are, but if you use the browser based streetview and inspect your network traffic with a program like Fiddler you can see that each scene fetches 20 .jpg's. These images do not have the embedded street names.
You can save the images directly from fiddler and/or probably whip up a script to capture and catalog them as you "drive" streetview.
EDIT: You can also view the raw images fetched by Google Earth with Fiddler.
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."
Well when a flash file is embedded on a website (tested it with Chrome but Firefox and IE are probably affected as well), a referrer is sent.
When a client is opened with flash projector, a referrer is not sent.
> it would be limited and temporary.
I don't know what is meant by limited.
Temporary, yes, hackers may find a workaround if DECA begin to block embedded hacked clients.
>I think it’s not possible.
It's 100% possible to detect embedded hacked clients, like the one found on R***mStock. If you want to test it yourself, Fiddler is a free tool that will log HTTP/HTTPS requests.
Anyways, speaking as an slightly experienced web developer, it would be very easy to write a script that searches through server logs and collects every login made with "059client.swf" in the referrer, and then issue a huge ban wave.
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.
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.
There are a couple ways to do it. First is to use something like Wireshark or mitmproxy to read the network requests the app is making.
Another option is to decompile the apps. This will let them view the source code, which will let them see where it's making network connections
Finally, you can use debugging tools on a physical device to see what's going on.
You can interactively view requests, and create replacement filters on them. You can also pass all options by cli arguments.
It has a kinda funky UI, but you get used to it pretty quick.
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
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).
Can't vouch for the company but a charles proxy is indeed a thing. They presumably want to look at traffic from server x doing job y for program z, to your home. Think of it like a packet sniffer. Thus, I'd not use it on any devices you do sensitive stuff on (though any sensitive stuff should by default, be encrypted, it's more of a safe than sorry thing).
- For functional testing (like testing user flows), mitmproxy/mitmdump is a really great tool.
- For "pedal-to-the-metal" stress tests, check out Apache/AB.
- For pre-built stress tests (like generic unit tests), Apache/JMeter is pretty powerful.
I think mitmdump is the best fit for your use case. Only thing to watch out for is that mitmproxy is a bit of a resource hog, so you might need some port-mirror trickery to avoid introducing performance-related bugs on production.
That's from Chrome's developer tools. On your desktop, you can access them by clicking Developer Tools under the Tools menu, or by pressing F12 on Linux or Windows or Cmd+Opt+I on OS X.
Chrome on the desktop can also be used to inspect a tab in Chrome on Android, which is how I got that information. To do this you'll have to enable USB debugging on your Android device (under developer options in the system settings), then plug the device into your PC or Mac and go to chrome://inspect/#devices on the desktop. More information here.
There's a similar process that can be used to debug Safari on iOS, but it requires a Mac and I can't remember the setup offhand.
I've had a lot of fun using the chrome developer console. They have a lot of great features that make debugging much more fun than just looking at a flat log.
I've been using this guide to make some pretty useful console visualizations.
The documentation is pretty good too.
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...
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.