Opened on 07/23/2015 at 08:03:57 PM

Signup for a Developer Edition. Browse by Topic. Apex Code Development (83383) General Development (52646) Visualforce Development (36260) APIs and Integration (14914). React Developer Tools is a tool that allows you to inspect a React tree, including the component hierarchy, props, state, and more. To get started, just open the Firefox devtools and switch to the '⚛️ Components' or '⚛️ Profiler' tab. One of those is Final Fantasy XV: Windows Edition, and now developer Square Enix has released a special version of the game’s benchmark that demonstrates how DLSS looks and performs in their graphically-advanced, performance-intensive, open-world role-playing action game. Developer Edition now includes “Quantum CSS,” an entirely new CSS engine written in Rust and based on the Servo parallel browser engine project. Additionally, the “Quantum Flow” team tracked down and fixed 369 performance bugs in Firefox, with a special focus on responsiveness and UI interactions. The latest in Square Enix’s series of “Inside Final Fantasy ” developer diaries focuses on Final Fantasy Crystal Chronicles Remastered Edition. Originally filmed in 2018, the Final Fantasy Crystal.

Closed on 07/31/2015 at 05:02:05 PM

#2816closeddefect (fixed)

Reported by:	Assignee:	trev
Priority:	Unknown	Milestone:	Element-Hiding-Helper-1.3.3
Module:	Extensions-for-Adblock-Plus	Keywords:
Cc:	Blocked By:
Blocking:	Platform:	Firefox
Ready:	yes	Confidential:	no
Tester:	Unknown	Verified working:	no
Review URL(s):	​https://codereview.adblockplus.org/29322778/ ​https://codereview.adblockplus.org/29323107/

Change History (5)

comment:1 Changed on 07/23/2015 at 08:05:04 PM by mapx

• Description modified (diff)

comment:2 Changed on 07/28/2015 at 08:56:42 AM by trev

• Owner set to trev
• Ready set

comment:3 Changed on 07/28/2015 at 09:54:39 AM by trev

• Description modified (diff)
• Review URL(s) modified (diff)

comment:4 Changed on 07/30/2015 at 01:13:57 PM by trev

• Review URL(s) modified (diff)
• Status changed from new to reviewing

comment:5 Changed on 07/31/2015 at 05:02:05 PM by trev

• Milestone set to Element-Hiding-Helper-next
• Resolution set to fixed
• Status changed from reviewing to closed

Opening Settings

Beginning with Firefox 62, the icon to open Developer Tools settings has been moved into a menu accessed by clicking/touching ... (the ellipsis) on the right of the tab.

The menu includes settings to control the location of the Developer Tools. You can choose between the default setting at the bottom of the windows, or move the tools to the left or right side of the screen. These settings are particularly useful if you have a widescreen monitor. You can also choose to open the tools in a separate window.

Show split console adds a section at the bottom of the tools showing the console. It makes visible the command line and one or two lines of the console output.

The rest of the settings are on the Developer Tools Settings Pane. To see the settings, open any of the Developer Tools, and then:

• click the 'Settings' command in the menu:
• or press F1 to toggle between the active tool and the Settings pane

The Settings pane looks something like this:

Categories

Default Firefox Developer Tools

This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.

Available Toolbox Buttons

This group of checkboxes determines which tools get an icon in the Toolbox's toolbar.

As of Firefox 62, if the option to 'Select an iframe as the currently targeted document' is checked, the icon will appear in the toolbar while the Settings tab is displayed, even if the current page doesn't include any iframes.

Note that in Firefox 52 we removed the checkbox to toggle the 'Select element' button. The 'Select element' button is now always shown.

Themes

This enables you to choose one of two themes.

• There's a light theme, which is the default:

• A dark theme (the default on Firefox Developer Edition):

Common preferences

Settings that apply to more than one tool. There's just one of these:

Enable persistent logs

A setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.

If Common Preferences is not included in the Settings, Web Console logs can be persisted by using the 'about:config' url in browser address bar, searching for: 'devtools.webconsole.persistlog' then toggling this value to true

Inspector

Show browser styles

A setting to control whether styles applied by the browser (user-agent styles) should be displayed in the Inspector's Rules view. Note that this setting is independent of the 'Browser styles' checkbox in the Inspector's Computed view.

Truncate DOM attributes

By default, the Inspector truncates DOM attributes that are more than 120 characters long. Uncheck this box to prevent this behavior. This setting works by toggling the about:config preference 'devtools.markup.collapseAttributes'. To change the threshold at which attributes are truncated, you can edit the about:config preference 'devtools.markup.collapseAttributeLength'.

Default color unit

A setting to control how colors are represented in the inspector:

• Hex
• HSL(A)
• RGB(A)
• color name
• As authored.

Enable layout panel

Enable the experimental layout panel. This setting only exists in Firefox Nightly.

Web Console

Debugger

Style Editor

Screenshot Behavior

Ff Developer Edition Xbox One

Editor Preferences

Preferences for the CodeMirror source editor, which is included in Firefox and used by several developer tools, including Scratchpad and the Style Editor.

Detect indentation

Auto-indent new lines based on the current indentation.

Autoclose brackets

Determines whether typing an opening character like [ or { will cause the editor to insert the matching closing character ] or } for you.

Indent using spaces

When checked, indentation will be performed using spaces, when off, the editor will use tabs instead.

Tab size

The frequency of tab stops in the editor. Select 2, 4, or 8.

Keybindings

Choose the default CodeMirror keybindings or keybindings from one of several popular editors:

• Vim
• Emacs
• Sublime Text

Advanced settings

Show Gecko platform data

A setting to control whether or not profiles should include Gecko platform symbols.

Disable HTTP Cache

Disable the browser HTTP cache to simulate first-load performance in all tabs that have the Toolbox open. This setting persists, meaning that if it is set, caching will be disabled whenever you reopen the devtools. Caching is re-enabled when the devtools are closed. Note that service workers are not affected by this option.

Disable JavaScript

Reload the current tab with JavaScript disabled.

Enable Service Workers over HTTP

Enable Service Worker registrations from insecure websites.

Ff Developer Edition Download

Enable browser chrome and add-on debugging toolboxes

Enable you to use developer tools in the context of the browser itself, and not only web content.

Enable remote debugging

Enable the developer tools to debug remote Firefox instances.

Enable worker debugging

Enable a panel within the debugger to debug workers.

Note: This option got removed from the UI in Firefox 56, because this version ships with a new Debugger UI, but it can still be enabled for the old UI by setting the preference devtools.debugger.workers to true.