Search completed in 1.06 seconds.
852 results for "Tools":
Your results are loading. Please wait...
DevTools API - Firefox Developer Tools
warning: the devtools api is still wip.
... if you notice any inconsistency, please let the firefox developer tools team know.
... introduction the devtools api provides a way to register and access developer tools in firefox.
...And 26 more matches
Deprecated tools - Firefox Developer Tools
over the course of devtools development, we have added several experimental panels to try out new ideas.
... you may see a warning message, as in the following image, when trying to activate a deprecated panel: in addition, if you open the panel for one of these tools, you will also see a warning message about its removal.
... description webide allowed you to connect the firefox developer tools to remote browsers, such as firefox for android.
Index - Firefox Developer Tools
found 158 pages: # page tags and summary 1 firefox developer tools developing mozilla, guide, tools, web development, web development:tools, l10n:priority firefox developer tools is a set of web developer tools built into firefox.
... 2 3d view html, tools, web development, web development:tools when you click on the 3d view button, the page goes into 3d view mode; in this mode, you can see your page presented in a 3d view in which nested blocks of html are increasingly "tall," projecting outward from the bottom of the page.
... 3 accessibility inspector accessibility, accessibility inspector, devtools, guide, tools the accessibility inspector provides a means to access important information exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what's missing or otherwise needs attention.
...And 82 more matches
Migrating from Firebug - Firefox Developer Tools
when migrating from firebug to the firefox developer tools, you may wonder where the features you loved in firebug are available in the developer tools.
... the following list aims to help firebug users to find their way into the developer tools.
... for the latest developer tools and features, try firefox developer edition.
...And 66 more matches
Firefox Developer Tools
firefox developer tools is a set of web developer tools built into firefox.
... this section contains detailed guides to all of the tools as well as information on how to debug firefox for android, how to extend devtools, and how to debug the browser as a whole.
... if you have any feedback on devtools, or want to contribute to the project, you can join the devtools community.
...And 23 more matches
Settings - Firefox Developer Tools
opening settings beginning with firefox 62, the icon to open developer tools settings has been moved into a menu accessed by clicking/touching ...
... 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.
...And 15 more matches
What are browser developer tools? - Learn web development
every modern web browser includes a powerful suite of developer tools.
... these tools do a range of things, from inspecting currently-loaded html, css and javascript to showing which assets the page has requested and how long they took to load.
... this article explains how to use the basic functions of your browser's devtools.
...And 12 more matches
Tools and testing - Learn web development
once you've started to become comfortable programming with core web technologies (like html, css, and javascript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from javascript frameworks, to testing and automation tools, and more besides.
... as your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, working out a reliable toolchain to give your development process superpowers.
... working out what tools you should be using can be a difficult process, so we have written this set of articles to inform you of what types of tool are available, what they can do for you, and how to make use of the current industry favourites.
...And 8 more matches
All keyboard shortcuts - Firefox Developer Tools
this page lists all keyboard shortcuts used by the developer tools built into firefox.
... opening and closing tools these shortcuts work in the main browser window to open the specified tool.
... the same shortcuts will work to close tools hosted in the toolbox, if the tool is active.
...And 8 more matches
Toolbox - Firefox Developer Tools
the toolbox provides a single home for most of the developer tools that are built into firefox.
... there are a few different ways to open the toolbox: select "toggle tools" from the web developer menu (under "tools" on os x and linux, or "firefox" on windows) click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "toggle tools" activate any tool hosted in the toolbox (for example, the javascript debugger or the page inspector) press ctrl + shift + i on windows and linux, or cmd + opt + i on os x.
...this is what it looks like when it's docked: the window itself is split into two parts: a toolbar along the top, and a main pane underneath: note: since firefox 62, you can drag and drop tabs in the main toolbar of the toolbox to reorder your tools as you wish (bug 1226272).
...And 7 more matches
about:debugging - Firefox Developer Tools
the about:debugging page provides a single place from which you can attach the firefox developer tools to a number of debugging targets.
... in the tools > web developer menu, click remote debugging.
... if your about:debugging page is different from the one displayed here, go to about:config, find and set the option devtools.aboutdebugging.new-enabled to true.
...And 7 more matches
NSS Tools
nss security tools newsgroup: mozilla.dev.tech.crypto overview the nss security tools allow developers to test, debug, and manage applications that use nss.
... the tools information table below describes both the tools that are currently working and those that are still under development.
... currently, you must download the nss 3.1 source and build it to create binary files for the nss tools.
...And 5 more matches
Accessibility Inspector - Firefox Developer Tools
the accessibility inspector also uses this information to provide valuable accessibility debugging capabilities in the devtools.
... accessing the accessibility inspector when you first open any of the other developer tools, the accessibility features are turned off (unless you've already got them turned on in another browser tab, or got the firefox accessibility engine started already, e.g., you might be a screenreader user or tester).
...starting in firefox 79, it is automatically enabled when you do one of the following: choose accessibility in the tools > web developer menu.
...And 5 more matches
Browser Console - Firefox Developer Tools
if you also want to use the other web developer tools in the regular web toolbox with add-on or browser code, consider using the browser toolbox.
...to enable it set the devtools.chrome.enabled preference to true in about:config, or set the "enable browser chrome and add-on debugging toolboxes" (firefox 40 and later) option in the developer tool settings.
... opening the browser console you can open the browser console in one of two ways: from the menu: select "browser console" from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on macos).
...And 4 more matches
Style Editor - Firefox Developer Tools
the style editor enables you to: view and edit all the stylesheets associated with a page create new stylesheets from scratch and apply them to the page import existing stylesheets and apply them to the page to open the style editor choose the "style editor" option from the "web developer" menu (which is a submenu in the "tools" menu on the mac).
...these tools generate css files from a richer and more expressive syntax.
... source maps enable the tools to map back from the generated css to the original syntax, so they can display, and allow you to edit, files in the original syntax.
...And 4 more matches
Understanding client-side web development tools - Learn web development
client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line.
... get started now, with our "client-side tooling overview" prerequisites you should really learn the basics of the core html, css, and javascript languages first before attempting to use the tools detailed here.
...client-side tooling overview in this article we provide an overview of modern web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of web app development, and how to find help with individual tools.
...And 3 more matches
Debugger-API - Firefox Developer Tools
both firefox’s built-in developer tools and the firebug add-on use debugger to implement their javascript debuggers.
... however, debugger is quite general, and can be used to implement other kinds of tools like tracers, coverage analysis, patch-and-continue, and so on.
...javascript is both the debuggee language and the tool implementation language, so the qualities that make javascript effective on the web can be brought to bear in crafting tools for developers.
...And 3 more matches
about:debugging (before Firefox 68) - Firefox Developer Tools
the about:debugging page provides a single place from which you can attach the firefox developer tools to a number of debugging targets.
... in the tools > web developer menu, click "service workers".
... whether or not system add-ons appear in the list on this page depends on the setting of the devtools.aboutdebugging.showsystemaddons preference.
...And 3 more matches
Tools for SVG - SVG: Scalable Vector Graphics
« previous now that we covered the basics of the svg internals, we will take a look at some tools to work with svg files.
... inkscape url: www.inkscape.org one of the most important tools for a graphics format is a decent drawing program.
... apache batik url: xmlgraphics.apache.org/batik/ batik is a set of open source tools under the roof of the apache software foundation.
...And 3 more matches
NSS tools : certutil
by default, the tools (certutil, pk12util, modutil) assume that the given security databases follow the more common legacy type.
...for example: $ certutil -l -d sql:/home/my/sharednssdb to set the shared database type as the default type for the tools, set the nss_default_db_type environment variable to sql: export nss_default_db_type="sql" this line can be set added to the ~/.bashrc file to make the change permanent.
... * http://tools.ietf.org/html/rfc5280 * http://tools.ietf.org/html/rfc1113 * http://tools.ietf.org/html/rfc1485 the nss wiki has information on the new database design and how to configure applications to use it.
...And 2 more matches
NSS tools : pk12util
nss tools : pk12util name pk12util — export and import keys and certificate to or from a pkcs #12 file and the nss database synopsis pk12util [-i p12file|-l p12file|-o p12file] [-d [sql:]directory] [-h tokenname] [-p dbprefix] [-r] [-v] [-k slotpasswordfile|-k slotpassword] [-w p12filepasswordfile|-w p12filepassword] description the pkcs #12 utility, pk12util, enables sharing certificates among any server that supports pkcs#12.
... by default, the tools (certutil, pk12util, modutil) assume that the given security databases follow the more common legacy type.
...for example: # pk12util -i /tmp/cert-files/users.p12 -d sql:/home/my/sharednssdb to set the shared database type as the default type for the tools, set the nss_default_db_type environment variable to sql: export nss_default_db_type="sql" this line can be set added to the ~/.bashrc file to make the change permanent.
...And 2 more matches
NSS tools : modutil
by default, the tools (certutil, pk12util, modutil) assume that the given security databases follow the more common legacy type.
...for example: modutil -create -dbdir sql:/home/my/sharednssdb to set the shared database type as the default type for the tools, set the nss_default_db_type environment variable to sql: export nss_default_db_type="sql" this line can be added to the ~/.bashrc file to make the change permanent.
... o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [2]http://www.mozilla.org/projects/security/pki/nss/.
... mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, sun, oracle, mozilla, and google.
NSS tools : modutil
MozillaProjectsNSStoolsmodutil
by default, the tools (certutil, pk12util, modutil) assume that the given security databases follow the more common legacy type.
...for example: modutil -create -dbdir sql:/home/my/sharednssdb to set the shared database type as the default type for the tools, set the nss_default_db_type environment variable to sql: export nss_default_db_type="sql" this line can be set added to the ~/.bashrc file to make the change permanent.
... o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [2]http://www.mozilla.org/projects/security/pki/nss/.
... mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun.
NSS tools : pk12util
by default, the tools (certutil, pk12util, modutil) assume that the given security databases follow the more common legacy type.
...for example: # pk12util -i /tmp/cert-files/users.p12 -d sql:/home/my/sharednssdb to set the shared database type as the default type for the tools, set the nss_default_db_type environment variable to sql: export nss_default_db_type="sql" this line can be set added to the ~/.bashrc file to make the change permanent.
... o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
... mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun.
NSS tools : signver
MozillaProjectsNSStoolssignver
by default, the tools (certutil, pk12util, modutil) assume that the given security databases follow the more common legacy type.
...for example: # signver -a -s signature -d sql:/home/my/sharednssdb to set the shared database type as the default type for the tools, set the nss_default_db_type environment variable to sql: export nss_default_db_type="sql" this line can be set added to the ~/.bashrc file to make the change permanent.
... o setting up the shared nss database https://wiki.mozilla.org/nss_shared_db_howto o engineering and technical information about the shared nss database https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
... mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun.
Tutorial: Set a breakpoint - Firefox Developer Tools
to do this, open the firefox developer tools, click on the options gear at the upper right of the toolbox, and make sure that both “enable browser chrome and add-on debugging toolboxes” and “enable remote debugging” are checked.
...once they’re checked, you can close the developer tools.
...to enable it, click on the options gear at the upper right of the browser content toolbox, and make sure the “scratchpad” box in the “default developer tools” section the left is checked.
... this shows how any number of debugger-based tools can observe a single web page simultaneously.
Edit fonts - Firefox Developer Tools
this article provides a tour of the font tools available in the firefox devtools.
... note: the updated font tools as shown in this article are available in firefox 63 onwards; if you are using an older version of firefox the tools will not look or behave quite the same, but they will be similar (most notably the font editor will not be available).
... variable font support in firefox developer tools firefox 62 added support for variable fonts and firefox 63 features support for editing the properties of variable fonts in the font editor.
...if your operating system is not up to date, you will not be able to use variable fonts in web pages or the firefox developer tools.
Remote Debugging - Firefox Developer Tools
you can use the firefox developer tools on your desktop to debug web sites and web apps running in other browsers or runtimes.
... the other browser might be on the same device as the tools themselves or on a different device, such as a phone connected over usb.
... the detailed instructions for connecting the developer tools are specific to the runtime.
... you can connect the developer tools to gecko-based runtimes like firefox desktop, firefox for android, and thunderbird.
Responsive Design Mode - Firefox Developer Tools
toggling responsive design mode there are three ways to toggle responsive design mode: from the firefox menu: select responsive design mode from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on macos).
... from the developer tools toolbox: press the responsive design mode button in the toolbox's toolbar: from the keyboard: press ctrl + shift + m (or cmd + opt + m on macos).
... if you checked "screenshot to clipboard" in the developer tools settings page, then the screenshot will be copied to the system clipboard.
...for example: developer toolbox with rdm you can show or hide the developer tools toolbox independently of toggling responsive design mode itself: while responsive design mode is enabled, you can continue browsing as you normally would in the resized content area.
Standards-Compliant Authoring Tools - Archive of obsolete content
the following authoring tools adhere to the w3 standards.
... if you're using older versions of tools that rely on old browser bugs or generate browser-specific code, it may be time to upgrade: nvu is a standalone editor created from the remains of mozilla composer.
... macromedia™ dreamweaver™ cs6 style master and layout master by western civilisation some caveats: it appears that tools currently available from namo generate ie-specific or netscape 4-specific code that may require extra debugging for compatibility with standards-based browsers.
Tools for game development - Game development
on this page you can find links to our game development tools articles, which eventually aims to cover frameworks, compilers, and debugging tools.
...what specialist tools are available?
... a lot of this is going to be covered by will in tools, but here we should provide a kind of practical toolchain tutorial for debugging games, with links to will's stuff: basic tools overview shader editor performance tools (still in production, estimated early 2014) ...
Developer Tools - MDN Web Docs Glossary: Definitions of Web-related terms
developer tools (or "development tools" or short "devtools") are programs that allow a developer to create, test and debug software.
... current browsers provide integrated developer tools, which allow to inspect a website.
... learn more general knowledge web development tools on wikipedia technical reference firefox developer tools on mdn firebug (former developer tool for firefox) chrome devtools on chrome.com safari web inspector on apple.com edge dev tools on microsoft.com ...
Mozilla Development Tools
this page lists the various development tools that we operate and/or maintain here at mozilla.org.
... naturally, source code for all of these tools is also available.
... the tools needed to build mozilla are described on the build page for your platform.
NSS tools : ssltab
see also the nss security tools are also documented at [1]http://www.mozilla.org/projects/security/pki/nss/.
...mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape and now with red hat and sun.
...http://www.mozilla.org/projects/secu.../pki/nss/tools 2.
NSS tools : ssltap
see also the nss security tools are also documented at [1]http://www.mozilla.org/projects/security/pki/nss/.
...mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape and now with red hat and sun.
...http://www.mozilla.org/projects/secu.../pki/nss/tools 2.
NSS tools : ssltap
MozillaProjectsNSStoolsssltap
see also the nss security tools are also documented at [1]http://www.mozilla.org/projects/security/pki/nss/.
... mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape and now with red hat and sun.
...http://www.mozilla.org/projects/secu.../pki/nss/tools 2.
Application - Firefox Developer Tools
the application panel provides tools for inspecting and debugging modern web apps (also known as progressive web apps).
... accessing the application panel the application panel is available on the standard devtools tab menu under application, in firefox 79+.
... if you can’t see it there, you can enable it by going to the "three dot" menu and selecting settings (also accessible by pressing f1), then checking the application checkbox under default developer tools.
Browser Toolbox - Firefox Developer Tools
to do this, open the developer tools settings, go to the section "advanced settings", and check the settings "enable browser chrome and add-on debugging toolboxes" and "enable remote debugging".
... you will be presented with a dialog like this (it can be removed by setting the devtools.debugger.prompt-connection property to false): click ok, and the browser toolbox will open in its own window: you'll be able to inspect the browser's chrome windows and see, and be able to debug, all the javascript files loaded by the browser itself and by any add-ons that are running.
... altogether you will have access to the following developer tools: debugger (note: if you want to debug a specific add-on that is restartless or sdk-based then try the add-on debugger.) console style editor performance network monitor page inspector accessibility inspector you can debug chrome: and about: pages using the normal debugger, just as if they were ordinary content pages.
DOM Property Viewer - Firefox Developer Tools
enable it in the developer tools settings.
...to enable it, open the developer tool settings and check the "dom" box under "default firefox developer tools".
... opening the dom property viewer once enabled, you can open the dom property viewer by selecting "dom" from the web developer submenu in the firefox menu panel (or tools menu if you display the menu bar or are on macos), or by pressing its ctrl + shift + w keyboard shortcut.
Page inspector 3-pane mode - Firefox Developer Tools
enabling the 3-pane inspector pre-firefox 62 in earlier versions of firefox (since firefox 59/60), you can enable 3 pane mode in release/beta by going to about:config and flipping the following prefs to true: devtools.inspector.split-rule-enabled — this switches 3-pane mode on and off.
... devtools.inspector.split-sidebar-toggle — this adds the ui toggle button that lets you toggle it on and off.
... in firefox 61, these preferences got renamed to: devtools.inspector.three-pane-enabled devtools.inspector.three-pane-toggle you need to flip these two to true in release/beta to test the feature in firefox 61.
Debugging Firefox Desktop - Firefox Developer Tools
this guide explains how you can use the firefox developer tools to debug a different instance of desktop firefox running on the same machine.
... enable remote debugging first, you'll need to ensure that both debugger and debuggee have the "enable browser chrome and add-on debugging toolboxes" and "enable remote debugging" settings checked in the developer tools settings.
...to use a different port, pass the desired port number: /path/to/firefox --start-debugger-server 1234 note: in windows, the start-debugger-server call will only have one dash: firefox.exe -start-debugger-server 1234 note: by default, and for security reasons, the devtools.debugger.force-local option is set.
Tips - Firefox Developer Tools
settings: choose between a light and a dark theme for the developer tools.
... check or uncheck the different tools to enable or disable them.
... (there are more than the default tools!) page inspector in the markup view: press h with a node selected to hide/show it.
Web Console remoting - Firefox Developer Tools
the webconsoleactor and the webconsoleclient the webconsoleactor lives in dbg-webconsole-actors.js, in the toolkit/devtools/webconsole folder.
... the webconsoleclient lives in webconsoleclient.jsm (in toolkit/devtools/webconsole) and it is used by the web console when working with the web console actor.
... to see how the debugger is used in the web console code, look in browser/devtools/webconsole/webconsole.js, and search for webconsoleconnectionproxy.
Web Console - Firefox Developer Tools
split console use the console alongside other tools.
... opening the web console you open the web console from a menu or with a keyboard shortcut: choose web console from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on mac os x) press the ctrl+shift+k (command+option+k on os x) keyboard shortcut.
... the toolbox appear at the bottom, left, or right of the browser window (depending on your docking settings), with the web console activated (it's just called console in the devtools toolbar).
NSS tools : vfychain
additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
...mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun.
NSS tools : vfyserv
name vfyserv — tbd synopsis vfyserv description the vfyserv tool verifies a certificate chain options additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
...mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun.
NSS tools : signtool
o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
... mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun.
NSS tools : vfychain
additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
... mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun.
The Web Developer Menu - Firefox Developer Tools
the web developer menu is the main way to access the developer tools that are built into firefox.
... on os x and linux, it's under the "tools" menu: on windows 7, it's under the "firefox" menu: you'll see that the menu is split into three sections: the first section lists tools that are hosted in the toolbox, which is a dedicated window for developer tools the second section lists integrated tools that are not hosted in the toolbox, as well as any tools installed as add-ons (you'll see in the windows screenshot above that i've installed the firefox os simulator) the third section, "get more tools", is a link to more web development add-ons for firefox ...
Introduction to DOM Inspector - Firefox Developer Tools
the dom inspector is a mozilla extension that you can access from the tools > web development menu in seamonkey, or by selecting the dom inspector menu item from the tools menu in firefox and thunderbird, or by using ctrl/cmd+shift+i in either application.
...used in concert with mozilla tools like venkman, the javascript debugger, the dom inspector can give you a complete view of any web page or dom-based application interface.
Debugging service workers - Firefox Developer Tools
in this article we will look at debugging service workers using the firefox devtools application panel.
... the firefox devtools’ storage tab has a cache storage section that lists all the different caches you have stored under each different origin.
Access debugging in add-ons - Firefox Developer Tools
the following items are accessible in the context of chrome://browser/content/debugger.xul (or, in version 23 beta, chrome://browser/content/devtools/debugger.xul): window.addeventlistener("debugger:editorloaded") - called when the read-only script panel loaded.
... window.addeventlistener("debugger:editorunloaded") relevant files: chrome://browser/content/devtools/debugger-controller.js chrome://browser/content/devtools/debugger-toolbar.js chrome://browser/content/devtools/debugger-view.js chrome://browser/content/devtools/debugger-panes.js unfortunately there is not yet any api to evaluate watches/expressions within the debugged scope, or highlight elements on the page that are referenced as variables in the debugged scope.
Step through code - Firefox Developer Tools
the thinking here is that if you've got your devtools open in a separate window, as many people do, it can be easier to have the buttons available right there to move the code forward while you are looking at the result.
... if you want to turn this feature off, since firefox 71 you can do so by going to about:config in a new tab, setting the devtools.debugger.features.overlay pref to false, and restarting the browser.
Network request list - Firefox Developer Tools
you can configure the threshhold in the configuration editor (about:config) by modifying the devtools.netmonitor.audits.slow setting.
... when you refresh the page, that specific url will be blocked and a message will be added to the item in the list indicating that it has been blocked by the devtools.
CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
the flexbox inspector allows you to examine css flexbox layouts using the firefox devtools, which is useful for discovering flex containers on a page, examining and modifying them, debugging layout issues, and more.
... discovering flex containers when an html element on your page has display: flex applied to it, a number of features are made available in the devtools to provide easy access to flexbox layout features.
Examine and edit CSS - Firefox Developer Tools
you can: toggle pseudo-classes; toggle classes; add a new rule; change the display based on the color scheme preference (as of firefox 72, you must set devtools.inspector.color-scheme-simulation.enabled to true in the configuration editor to enable this feature); change the display based on print media rules.
... view @media rules for color-scheme-preference as of firefox 72, you must set devtools.inspector.color-scheme-simulation.enabled to true in the configuration editor to enable this feature.
CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
the grid inspector allows you to examine css grid layouts using the firefox devtools, discovering grids present on a page, examining and modifying them, debugging layout issues, and more.
... discovering css grids when an html element on your page has display: grid applied to it, a number of features are made available in the devtools to provide easy access to grid features.
Frame rate - Firefox Developer Tools
it gives you a quick indication of where your site might be having problems, enabling you to use the other tools for a more in-depth analysis.
... using the frame rate graph the great value of the frame rate graph is that, like the web console, it gives you a quick indication of where your site might be having problems, enabling you to use the other tools for more in-depth analysis.
How to - Firefox Developer Tools
open the performance tools to open the performance tools: press shift + f5 select "performance" from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on os x) select "performance" from tools button, in the toolbar, if you have one: record a profile to start a new recording, press the stopwatch icon in the recordings pane.
... select a tool to switch between the waterfall, call tree, and flame chart tools, use the buttons in the toolbar: configure markers displayed to control which markers are shown in the waterfall, use the button in the toolbar: zoom in to zoom into a slice of the recording, select that slice in the recording overview: ...
Animating CSS properties - Firefox Developer Tools
it's to demonstrate how the tools can give you insight into the work the browser is doing to render your site, and how you can apply that insight to diagnose and fix performance problems.
...compared with the version that uses margin, we're not spending any time time in layout or (more importantly in this case) in paint: in this case, using transform significantly improved the site's performance, and the performance tools were able to show how and why it did.
Performance - Firefox Developer Tools
you get four sub-tools to examine aspects of the profile in more detail: the waterfall shows the different operations the browser was performing, such as executing layout, javascript, repaints, and garbage collection the call tree shows the javascript functions in which the browser spent most of its time the flame chart shows the javascript call stack over the course of the recording the allocations view shows the heap all...
... intensive javascript uses the frame rate and waterfall tools to highlight performance problems caused by long-running javascript, and how using workers can help in this situation.
Shader Editor - Firefox Developer Tools
for details, see deprecated tools.
...to enable it, open the toolbox settings and check "shader editor" in the "default firefox developer tools" item.
Web Audio Editor - Firefox Developer Tools
for details, see deprecated tools.
...if you have feedback or suggestions for new features, dev-developer-tools or twitter are great places to register them.
Working with iframes - Firefox Developer Tools
you can point the developer tools at a specific iframe within a document.
... if you select an entry in the list, all the tools in the toolbox - the inspector, the console, the debugger and so on - will now target only that iframe, and will essentially behave as if the rest of the page does not exist.
Tools for analyzing Web Audio usage - Web APIs
while working on your web audio api code, you may find that you need tools to analyze the graph of nodes you create or to otherwise debug your work.
... this article discusses tools available to help you do that.
Tools - CSS: Cascading Style Sheets
WebCSSTools
this page offers links to a number of useful tools that will help you build the css to style your content using these features.
... other tools css animation - stylie to check the device display information (helpful in responsive web design) - mydevice.io css menus - cssmenumaker.com a mighty, modern css linter that helps you enforce consistent conventions and avoid errors in your stylesheets - stylelint ...
Tools - Archive of obsolete content
articles listed here provide a reference for the sdk's tools: cfx enables you to test, run, and package add-ons.
Firefox Developer Tools - Archive of obsolete content
these are articles related to the firefox developer tools, which are no longer current.
tools/power/rapl
tools/power/rapl (or rapl for short) is a command-line utility in the mozilla tree that periodically reads and prints all available intel rapl power estimates.
NSS tools : cmsutil
mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape and now with red hat.
NSS tools : crlutil
mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, sun, oracle, mozilla, and google.
NSS Tools certutil-tasks
nss security tools: certutil tasks newsgroup: mozilla.dev.tech.crypto task list better error reporting.
NSS Tools certutil
: modifying a certificate's trust attribute: displaying a list of the options and arguments used by the certificate database tool: examples creating a new certificate database this example creates a new certificate database (cert8.db file) in the specified directory: certutil -n -d certdir you must generate the associated key3.db and secmod.db files by using the key database tool or other tools.
NSS Tools dbck-tasks
nss security tools: dbck tasks newsgroup: mozilla.dev.tech.crypto task list in analyze mode, there should be an option to create a file containing a graph of the certificate database without any information about the user's certificates (no common names, email addresses, etc.).
NSS Tools modutil-tasks
nss security tools: modutil tasks newsgroup: mozilla.dev.tech.crypto task list the jar installation script is very fragile with respect to platform definitions (especially version numbers).
NSS Tools pk12util-tasks
nss security tools: pk12util tasks newsgroup: mozilla.dev.tech.crypto task list need to migrate code to use an up-to-date version of nss.
NSS Tools signver-tasks
nss security tools: signver tasks newsgroup: mozilla.dev.tech.crypto task list remove private hash algortihms and replace with code in lib/hash, lib/crypto, and ...
NSS tools : cmsutil
MozillaProjectsNSStoolscmsutil
mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape and now with red hat.
NSS tools : crlutil
MozillaProjectsNSStoolscrlutil
mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape and now with red hat.
Zest tools
the following tools currently support zest: owasp zed attack proxy the zap add-on allows the user to create, edit and run zest scripts.
Color vision simulation - Firefox Developer Tools
the simulator in the accessibility inspector in firefox developer tools lets you see what a web page would look like to users with various forms of color vision deficiency (better known as "color blindness"), as well as contrast sensitivity loss.
DOM Inspector - Firefox Developer Tools
or, build thunderbird yourself with the following options: ac_add_options --enable-extensions="default inspector" ac_add_options --enable-inspector-apis mozilla suite and seamonkey select tools > web development > dom inspector.
Add-ons - Firefox Developer Tools
developer tools that are not built into firefox, but ship as separate add-ons.
Inspecting web app manifests - Firefox Developer Tools
in this article we will look at inspecting app manifests using the firefox devtools application panel.
Examine, modify, and watch variables - Firefox Developer Tools
if you need to use it, you can, for now, switch back to the old debugger by visiting about:config and setting the "devtools.debugger.new-debugger-frontend" preference to false.
Open the debugger - Firefox Developer Tools
there are three ways to open the debugger: select "debugger" from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on mac os x) press ctrl + shift + z on windows and linux, or cmd + opt + z on macos (starting in firefox 71; prior to firefox 66, the letter in this shortcut was s).
Use a source map - Firefox Developer Tools
the comment's syntax is like this: //# sourcemappingurl=http://example.com/path/to/your/sourcemap.map in the video above we load https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html.
Debugger keyboard shortcuts - Firefox Developer Tools
global shortcuts these shortcuts work in all tools that are hosted in the toolbox.
Set event listener breakpoints - Firefox Developer Tools
selecting this and then choosing some events to break on will mean that when you step through code, information about events fired will be logged to the console instead of the devtools breaking on each one.
UI Tour - Firefox Developer Tools
the setting is reset when the developer tools are closed (except in firefox 77, see bug 1640318).
Using the Debugger map scopes feature - Firefox Developer Tools
open the example page and then open the debugger using tools > web developer > debugger (or press ctrl + i and then select the debugger).
Debugger.Memory - Firefox Developer Tools
debugger.memory the debugger api can help tools observe the debuggee’s memory use in various ways: it can mark each new object with the javascript call stack at which it was allocated.
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
visit the url about:config, and set the devtools.chrome.enabled preference to true: setting the 'devtools.chrome.enabled' preference open a developer scratchpad (menu button > developer > scratchpad), and select "browser" from the "environment" menu.
JSON viewer - Firefox Developer Tools
to enable this feature in other release channels, set the devtools.jsonview.enabled preference to true.
Measure a portion of the page - Firefox Developer Tools
to enable its button: go to the devtools settings.
Basic operations - Firefox Developer Tools
to enable it, open the developer tool settings, and check the "memory" box under "default firefox developer tools": from firefox 50 onwards, the memory tool is enabled by default.
Network Monitor - Firefox Developer Tools
select "network" from the web developer menu, (which is a submenu of the tools menu on os x and linux).
Examine and edit HTML - Firefox Developer Tools
whitespace nodes are represented with a dot: and you get an explanatory tooltip when you hover over them: to see this in action, see the demo at https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html.
Open the Inspector - Firefox Developer Tools
there are two main ways to open the inspector: choose tools > web developer > inspector from the menu bar or the equivalent keyboard shortcut.
Use the Inspector API - Firefox Developer Tools
firefox add-ons may access the following objects from the chrome://browser/content/devtools/inspector/inspector.xul context: window.inspector defined in inspector-panel.js.
Work with animations - Firefox Developer Tools
this article covers three tools you can use to visualize and edit animations: the animation inspector editing @keyframes editing timing functions animation inspector the page inspector's animations view displays animations in the page synchronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point.
Page inspector keyboard shortcuts - Firefox Developer Tools
enter return enter global shortcuts these shortcuts work in all tools that are hosted in the toolbox.
UI Tour - Firefox Developer Tools
the following image shows the 2-pane layout: in 2-pane mode, the inspector includes the html pane, and the css pane, which can contain one of six tools: rules view layout view computed view changes view compatibility view (firefox developer edition 77 and later) fonts view animations view the following image shows the 3-pane mode (available from firefox 62 onwards) which moves the css rules view into a separate pane in the center of the inspector.
Page Inspector - Firefox Developer Tools
see remote debugging to learn how to connect the developer tools to a remote target.
Allocations - Firefox Developer Tools
if you click this link, the devtools switches to the allocations view, and selects the region of time from the end of the last gc cycle to the start of the one you clicked on.
Intensive JavaScript - Firefox Developer Tools
you can use the frame rate and waterfall tools to see when javascript is causing performance problems, and to single out the particular functions that need attention.
Rulers - Firefox Developer Tools
to be able to toggle rulers for a page, you first need to enable the button by going to the settings page for the developer tools and checking "toggle rulers for the page" under available toolbox buttons.
Storage Inspector - Firefox Developer Tools
opening the storage inspector you can open the storage inspector by selecting "storage inspector" from the web developer submenu in the firefox menu panel (or tools menu if you display the menu bar or are on macos), or by pressing its shift + f9 keyboard shortcut.
Taking screenshots - Firefox Developer Tools
you can use the developer tools to take a screenshot of the entire page, or of a single element in the page.
Validators - Firefox Developer Tools
tune-up wizard links back to devedge if you're writing new code that isn't validating immediately, see the available standards-compliant authoring and development tools.
Web console keyboard shortcuts - Firefox Developer Tools
own arrow down arrow page up through autocomplete suggestions page up page up page up page down through autocomplete suggestions page down page down page down scroll to start of autocomplete suggestions home home home scroll to end of autocomplete suggestions end end end global shortcuts these shortcuts work in all tools that are hosted in the toolbox.
Split console - Firefox Developer Tools
you can use the console alongside other tools.
Index
2 an overview of nss internals api, intermediate, intro, nss, tools a high-level overview to the internals of network security services (nss) software developed by the mozilla.org projects traditionally used its own implementation of security protocols and cryptographic algorithms, originally called netscape security services, nowadays called network security services (nss).
...there are tools for managing nss databases, for dumping or verifying certificates, for registering pkcs#11 modules with a database, for processing cms encrypted/signed messages, etc.
...in other words, if your browser or your server operates on an older nss database format, don't use the nss tools to operate on it while the other software is executing.
...And 51 more matches
Introducing a complete toolchain - Learn web development
previous overview: understanding client-side tools next in the final couple of articles in the series we will solidify your tooling knowledge by walking you through the process of building up a sample case study toolchain.
... we'll go all the way from setting up a sensible development environment and putting transformation tools in place to actually deploying your app on netlify.
... in this article we'll introduce the case study, set up our development environment, and set up our code transformation tools.
...And 35 more matches
Index - Learn web development
at, accessibility, article, beginner, css, codingscripting, html, javascript, learn, tools, users, assistive technology, keyboard, screan reader, screenreader this article should have given you a useful high-level overview of accessibility, shown you why it's important, and looked at how you can fit it into your workflow.
... beginner, webmechanics, cost, hosting, web development tools when launching a website, you may spend nothing, or your costs may go through the roof.
... 25 what are browser developer tools?
...And 31 more matches
Client-side tooling overview - Learn web development
overview: understanding client-side tools next in this article we provide an overview of modern web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of web app development, and how to find help with individual tools.
... objective: to understand what types of client-side tooling there are, and how to find tools and get help with them.
...although it is still entirely reasonable to write html, css, and javascript "by hand" there is now a wealth of tools that developers can use to speed up the process of building a web site, or app.
...And 30 more matches
Index - Archive of obsolete content
81 dev/panel enables you to extend the firefox developer tools.
... 133 tools add-on sdk, cfx, jpm no summary!
... 264 chapter 6: firefox extensions and xul applications this chapter discusses tools to assist in developing extensions.
...And 28 more matches
Command line crash course - Learn web development
previous overview: understanding client-side tools next in your development process you'll undoubtedly be required to run some command in the terminal (or on the "command line" — these are effectively the same thing).
... this article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to add your own command line interface (cli) tools.
... objective: to understand what the terminal/command line is, what basic commands you should learn, and how to install new command line tools.
...And 28 more matches
Debugging CSS - Learn web development
this article will give you guidance on how to go about debugging a css problem, and show you how the devtools included in all modern browsers can help you to find out what is going on.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn the basics of what browser devtools are, and how to do simple inspection and editing of css.
... how to access browser devtools the article what are browser developer tools is an up-to-date guide explaining how to access the tools in various browsers and platforms.
...And 23 more matches
Web Replay
devtools' debugger and console can be used to inspect and control the replay.
... getting started to enable web replay (macos and firefox nightly only), go to devtools settings and select "enable webreplay".
... there are a few ways to start recording a tab: record current tab open the developer tools and click the button indicated below.
...And 19 more matches
Handling common HTML and CSS problems - Learn web development
previous overview: cross browser testing next with the scene set, we'll now look specifically at the common cross-browser problems you will come across in html and css code, and what tools can be used to prevent problems from happening, or fix problems that occur.
... this includes linting code, handling css prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.
... objective: to be able to diagnose common html and css cross browser problems, and use appropriate tools and techniques to fix them.
...And 13 more matches
Power profiling overview
and many tools report c-states using the latter names.
... intel processors have model-specific registers (msrs) containing measurements of how much time is spent in different c-states, and tools such as powermetrics (mac), powertop and turbostat (linux) can expose this information.
...for this reason, integrating power measurements into the gecko profiler is unlikely to be useful, and other power profiling tools typically use much lower sampling rates (e.g.
...And 10 more matches
Introduction to automated testing - Learn web development
to handle this efficiently, you should become familiar with automation tools.
...fortunately, there are tools to help us automate some of this pain away.
... using a task runner to automate testing tools as we said above, you can drastically speed up common tasks such as linting and minifying code by using a task runner to run everything you need to run automatically at a certain point in your build process.
...And 9 more matches
Authoring MathML - MathML
as a consequence, good mathml authoring tools are more important and we describe some tools below.
...of course, the list is by no means exhaustive and you are invited to check out the w3c mathml software list where you can find various other tools.
...tools mentioned on this page generates presentation mathml.
...And 9 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
"about" pages about:addons disabled add-on icons are not grey scale in tools > add-ons, the icons of disabled icons need to be converted to grey scale.
...this issue is fixed by adding the following css instructions to the file browser/preferences/aboutpermissions.css: .site-favicon { height: 16px; width: 16px; -moz-margin-end: 4px; list-style-image: url("chrome://mozapps/skin/places/defaultfavicon.png"); } web developer tools web developer toolbar {to be added} web console web console buttons do not change appearance on the web console (tools > web developer > web console), the toolbar buttons on the left-hand side do not change their appearance between their toggled on and toggled off status as a result it is not possible to determine which buttons are enabled.
... web console close button is missing the web console (tools > web developer > web console) is missing its close button, which makes it impossible to close.
...And 8 more matches
Package management basics - Learn web development
previous overview: understanding client-side tools next in this article we'll look at package managers in some detail to understand how we can use them in our own projects — to install project tool dependencies, keep them up-to-date, and more.
... without modern build tools, dependencies like this might be included in your project using a simple <script> element, but this might not work right out of the box and you will likely need some modern tooling to bundle your code and dependencies together when they are released on the web.
... installing parcel run the following command to install parcel locally: npm install parcel-bundler once that's done all the things, we're now ready for some "modern client-side development" (which really means using build tools to make the developer experience a little easier).
...And 8 more matches
Translation phase
the l10n tools are meant to help you maintain your localized content from release to release and leverage already localized materials when localizing new content.
... here we'll identify those groups of projects and the l10n tools associated with them.
...as you gain more experience, you may want to localize independent of mozilla-developed l10n tools, which we'll also discuss here.
...And 8 more matches
Mozilla
also available are assorted tools that you can use when debugging.
... developer guide there are lots of ways to contribute to the mozilla project: coding, testing, improving the build process and tools, or contributing to the documentation.
...for example, by using components.results.ns_error_not_initialized firefox here you can learn about how to contribute to the firefox project and you will also find links to information about the construction of firefox add-ons, using the developer tools in firefox, and other topics.
...And 8 more matches
Setting up an extension development environment - Archive of obsolete content
devtools.chrome.enabled = true.
... this enables to run javascript code snippets in the chrome context of the scratchpad from the tools menu.
... devtools.debugger.remote-enabled = true.
...And 7 more matches
Plug-n-Hack - Archive of obsolete content
overview plug-n-hack (pnh) is a proposed standard from the mozilla security team for defining how security tools can interact with browsers in a more useful and usable way.
... security researchers commonly use security tools in conjunction with browsers, but until now direct integration has required writing platform and browser specific extensions.
... configuring a browser to work with a security tool can be a non-trivial process, and this can discourage people with less experience from using such tools.
...And 7 more matches
Handling common accessibility problems - Learn web development
previous overview: cross browser testing next next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.
... objective: to be able to diagnose common accessibility problems, and use appropriate tools and techniques to fix them.
... missing alt text can be tested for in a number of ways, for example using accessibility auditing tools.
...And 7 more matches
Handling common JavaScript problems - Learn web development
this includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern javascript features working in older browsers, and more.
... objective: to be able to diagnose common javascript cross-browser problems, and use appropriate tools and techniques to fix them.
... it is worth mentioning command line uses — you can install these tools as command line utilities (available via the cli — command line interface) using npm (node package manager — you'll have to install nodejs first).
...And 7 more matches
Profiling with the Firefox Profiler
it has tighter integration with firefox than external profilers, and has more of a platform focus than the devtools performance panel.
...in addition to profiler.firefox.com, the firefox devtools have a simplified interface targeted towards web developers, but does not include as much information as the firefox profiler web app.
... it is available from the menu at tools > web developer > performance.
...And 7 more matches
Gecko Compatibility Handbook - Archive of obsolete content
after restarting your browser, add the the user-agent strings that you want to test to the list (tools | user agent switcher | options | options...
... you can now start using the user-agent string you've just created by clicking tools | user agent switcher |the name you have chosen.
... use the w3 html and css validator tools to validate the web page.
...And 6 more matches
Measuring performance - Learn web development
objective: to provide information about web performance metrics that you can collect through various web performance apis and tools that you can use to visualize that data.
... performance apis when writing code for the web, there are a large number of web apis available that allow you to create your own performance measuring tools.
... tools and metrics there are a number of different tools available to help you improve performance.
...And 6 more matches
Leak-hunting strategies and tips
leaking many copies of a string could be a very large leak, but the object graphs are small and easy to identify using gc-based leak detection.) what leak tools do we have?
... tool finds platforms requires leak tools for large object graphs leak gauge windows, documents, and docshells only all platforms any build gc and cc logs js objects, dom objects, many other kinds of objects all platforms any build leak tools for medium-size object graphs bloatview, refcount tracing and balancing objects that implement nsisupports or use moz_count_{ctor,dtor} all tier 1 platforms debug build (or build opt with --enable-logrefcnt) leaksoup (part of tracemalloc) all objects?
... (or allocations?) all tier 1 platforms build with --enable-trace-malloc leak tools for simple objects and summary statistics tracemalloc all allocations all tier 1 platforms build with --enable-trace-malloc valgrind all allocations mac, linux build with --enable-valgrind and some other options lsan all allocations mac, linux any build apple tools ?
...And 6 more matches
List of Mozilla-Based Applications - Archive of obsolete content
font management tool firecast digital signage and interactive kiosk tools also used in firecast easystart mozilla firefox web browser web browser usage stats from global stats fossamail email client for windows platform, based on mozilla thunderbird developed by moonchild productions, creator of the pale moon web browser flickr uploadr image upload tool see flickr uploadr: open source and powered by xulrunner fox...
...operating system gnome 3 will use spidermonkey through gjs google adwords editor editor google gadgets for linux google’s desktop widget engine uses xulrunner according to the build instructions grani grain sizing assessment tool according to this wiki page grani is based on xul and xpcom daim gwt-mosaic-xul xul builder for google web tools hachette's multimedia encyclopedia electronic encyclopedia this product was using mozilla in 2004 but i’m not sure if new version still does hacketyhack little coders helma web application framework uses mozilla rhino holt mcdougal cd-roms educational cd-roms activity generator and lab generator are both based on custom firefox di...
...stributions houdini 3d animation tools uses gecko in embedded help viewer httpunit automated testing framework uses mozilla rhino htmlunit browser for java programs uses mozilla rhino hyperinfo web application plat form uses goeckofx ibm websphere lombardi edition business process management system uses mozilla rhino and mozilla xpcom eclipse plug-in.
...And 5 more matches
Debugging JavaScript
it should give pointers to tools, aids and tricks which make debugging your code easier.
...to enable it, go to about:config in the url bar and set devtools.chrome.enabled to true, or set the "enable chrome and add-on debugging" option in the developer tool settings.
... activate it through with the menu tools > web developer > browser console.
...And 5 more matches
Commenting IDL for better documentation
the documentation team has tools that convert comments from the doxygen format into the standard reference article format we use here on mdn, with certain limitations.
...but by following the guidelines here, you can help make sure that our tools can generate a "good start" version of the documentation for your interfaces, and that the writers will be able to easily figure out what the tools are not able to do automatically.
...that lets doxygen (and by extension, our automated documentation import tools) know that the comment should be absorbed into documentation.
...And 5 more matches
Index
5 index localization found 42 pages: 6 l10n checks internationalization, localization, localization:tools, tools l10n checks is a python script and library similar to compare-locales.
... 13 initial setup localization as a pre-requisite to contributing to the l10n program, you need to have access to code, tools, and a properly configured local environment (i.e., your personal computer).
...here we'll go over the accounts you need as well as the tools and their configurations you need to set up before contributing.
...And 5 more matches
Localization content best practices
note on localizers mozilla localizers are volunteers with very diverse technical skills: some of them rely exclusively on translation tools, others prefer to work directly with text editors and don't have problems working with vcs systems.
...for example accessibility (a11y) strings: in this case space is less important than clarity, since these strings are not displayed in the ui but used by tools like screen readers.
... there is an established format for localization comments: it's important to follow the format as closely as possible, since there are a number of automated tools that parse these comments for easier access and use by localizers.
...And 5 more matches
NSS sources building testing
several tools are general purpose and can be used to inspect and manipulate the storage files that software using the nss library creates and modifies.
... other tools are only used for testing purposes.
... however, all these tools are good examples of how to write software that makes use of the nss library.
...And 5 more matches
dev/panel - Archive of obsolete content
note that at the moment you can't debug remote targets (for example, firefox os, the firefox os simulator, or firefox for android) using tools developed with this api.
... enables you to extend the firefox developer tools.
... most of the firefox developer tools are hosted in a ui component called the toolbox.
...And 4 more matches
Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
matsuzawa-san is a co-author of firefox 3 hacks (o'reilly japan, 2008.) this chapter discusses tools to assist in developing extensions.
... tools for extension developers fixme: are we sure we'll talking about venkman since it's not well maintained fixme: we maybe should talk about firebug and chromebug fixme: and what about console 2 and docked-js console?
... starting up select “javascript debugger” from the tools menu.
...And 4 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
developing a simple extension: hello world in this section, we will write an extremely simple “hello world” extension that only displays the time.3 phase 1: test install our first step will be to perform a test installation consisting of the minimum code needed to add a new menu item to the tools menu (figure 3).
... open the dom inspector by selecting the tools > dom inspector menu item.
...the menupop element 4 contains the merge point where you’re going to be adding a new menu item; you can see that it has the id menu_toolspopup.
...And 4 more matches
Setting Up a Development Environment - Archive of obsolete content
« previousnext » getting the right tools there are 3 tools that we think are essential for effective add-on development (or any kind of development, really): a source code editor, a source control system, and a build system.
...most xul tools and plugins you'll find online are merely templates that generate the folder structure for the project, and that's not much help.
...it can be installed on mac os x as part of the xcode tools package, and on windows with cygwin.
...And 4 more matches
The Essentials of an Extension - Archive of obsolete content
there are also downloadable tools for all platforms that generate them.
... one recommended location for menus in the classic menu vase is under the tools menu, so the code should really look like this: <menupopup id="menu_toolspopup"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertbefore="devtoolsendseparator"> <menupopup> <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhel...
...in this case it is the menupopup element that's inside of the tools menu element.
...And 4 more matches
Scratchpad - Archive of obsolete content
usage opening scratchpad in its own window there are several different ways to open scratchpad in its own window: press shift + f4, or go to the web developer menu (which is a submenu in the tools menu on macos and linux), then select scratchpad click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "scratchpad".
...first you need to check "scratchpad" in the "default firefox developer tools" section of the settings page.
... now scratchpad will be available in the toolbox, alongside other tools like the page inspector and the web console.
...And 4 more matches
Common questions - Learn web development
tools and setup questions related to the tools/software you can use to build websites.
... what are browser developer tools?
... every browser features a set of devtools for debugging html, css, and other web code.
...And 4 more matches
React resources - Learn web development
react devtools we used console.log() to check on the state and props of our application in this tutorial, and you'll also have seen some of the useful warnings and error message that react gives you both in the cli and your browser's javascript console.
... the react devtools utility allows you to inspect the internals of your react application directly in the browser.
... it adds a new panel to your browser's developer tools, and with it you can inspect the state and props of various components, and even edit state and props to make immediate changes to your application.
...And 4 more matches
Setting up your own test automation environment - Learn web development
we will also look at how to integrate your local testing environment with commercial tools like the ones discussed in the previous article.
... objective: to show how to set up a selenium testing environment locally and run tests with it, and how to integrate it with tools like lambdatest, sauce labs, and browserstack.
... you can use any url to point to your resource, including a file:// url to test a local document: driver.get('file:///users/chrismills/git/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html'); or driver.get('http://localhost:8888/fake-div-buttons.html'); but it is better to use a remote server location so the code is more flexible — when you start using a remote server to run your tests (see later on), your code will break if you try to use local paths.
...And 4 more matches
Cross browser testing - Learn web development
what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.
... get started prerequisites you should really learn the basics of the core html, css, and javascript languages first before attempting to use the tools detailed here.
... handling common html and css problems with the scene set, we'll now look specifically at the common cross-browser problems you will come across in html and css code, and what tools can be used to prevent problems from happening, or fix problems that occur.
...And 4 more matches
Web Performance
there are tools, apis, and best practices that help us measure and improve web performance.
...in the context of open web apps, this document explains in general what performance is, how the browser platform helps improve it, and what tools and processes you can use to test and improve it.performance monitoring: rum vs synthetic monitoringsynthetic monitoring and real user monitoring (rum) are two approaches for monitoring and providing insight into web performance.
... this article starts the module off with a good look at what performance actually is — this includes the tools, metrics, apis, networks, and groups of people we need to consider when thinking about performance, and how we can make performance part of our web development workflow.
...And 4 more matches
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
(for seamonkey 2, firefox, thunderbird and sunbird, see the page: custom toolbar button) you do not need any special technical skills or tools, and almost all the information you need is on this page.
... required tools you will need two tools.
...optional tools you can optionally use any image editor to customize the images.
...And 3 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
9 atag atag, accessibility, authoring tool accessibility guidelines, glossary atag (authoring tool accessibility guidelines) is a w3c recommendation for building accessible-authoring tools that produce accessible contents.
... 111 developer tools codingscripting, developer tools, glossary developer tools (or "development tools" or short "devtools") are programs that allow a developer to create, test and debug software.
... 159 fork fork, glossary, tools, git a fork is a copy of an existing software project at some point to add someone's own modifications to the project.
...And 3 more matches
Organizing your CSS - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn some tips and best practices for organizing stylesheets, and find out about some of the naming conventions and tools in common usage to help with css organization and team working.
... other tools that can help css itself doesn't have much in the way of in-built organisation, therefore you need to do the work to create consistency and rules around how you write css.
... the web community has also developed various tools and approaches that can help you to manage larger css projects.
...And 3 more matches
Simple SeaMonkey build
high speed internet installing build tools if your system is not listed below, see the build prerequisites page.
...apt-get build-dep seamonkey sudo apt-get install zip unzip mercurial g++ make autoconf2.13 yasm libgtk2.0-dev libglib2.0-dev libdbus-1-dev libdbus-glib-1-dev libasound2-dev libcurl4-openssl-dev libnotify-dev libgstreamer0.10-dev libgstreamer-plugins-base0.10-dev libiw-dev libxt-dev mesa-common-dev libpulse-dev fedora linux centos rhel: sudo yum groupinstall 'development tools' 'development libraries' 'gnome software development' sudo yum install mercurial autoconf213 glibc-static libstdc++-static yasm wireless-tools-devel mesa-libgl-devel alsa-lib-devel libxt-devel gstreamer-devel gstreamer-plugins-base-devel pulseaudio-libs-devel # 'development tools' is defunct in fedora 19 and above use the following sudo yum groupinstall 'c development tools and libraries' sudo yu...
...m group mark install "x software development" mac: install xcode tools.
...And 3 more matches
Experimental features in Firefox
the hit region api allows you define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.
... nightly 77 yes developer edition 77 no beta 77 no release 77 no preference name network.ftp.enabled developer tools mozilla's developer tools are constantly evolving.
... nightly 72 no developer edition 72 no beta 72 no release 72 no preference name devtools.inspector.color-scheme-simulation.enabled execution context selector this feature displays a button on the console's command line that lets you change the context in which the expression you enter will be executed.
...And 3 more matches
Mozilla projects on GitHub
there are a number of tools and services whose code is hosted on github.
... debugger.html the debugger.html, a modern universal js debugger for firefox devtools, node, and every other js environment.
... fxdt-adapters the firefox developer tools adapter that lets you debug various remote targets from the firefox developer tools.
...And 3 more matches
Refcount tracing and balancing
the script tools/rb/find_leakers.py does this.
... post-processing step 2: filtering the log once you've picked an object that leaked, you can use tools/rb/filter-log.pl to filter the log file to drop the call stack for other objects; this process reduces the size of the log file and also improves the performance.
... perl -w tools/rb/filter-log.pl --object 0x00253ab0 < ./refcounts.log > my-leak.log linux users the log file generated on linux system often lack function names, file names and line numbers.
...And 3 more matches
Performance
scroll-linked effects information on scroll-linked effects, their effect on performance, related tools, and possible mitigation techniques.
... memory profiling and leak detection tools the developer tools "memory" panel the memory panel in the devtools supports taking heap snapshots, diffing them, computing dominator trees to surface "heavy retainers", and recording allocation stacks.
... apple tools apple provides some tools for mac os x that report similar problems to those reported by lsan and valgrind.
...And 3 more matches
Mozilla Projects
many of these are components of firefox or are tools used to create firefox, but may be used by other projects as well.
...unlike other tools, it understands compiler-builtin atomics and synchronization and therefore provides very accurate results with no real false positives.
... webreplayroadmap this document describes existing, planned, and potential features for the firefox developer tools that are based on web replay, along with their ui.
...And 3 more matches
Setting up the Gecko SDK
downloading and setting the sdk the gecko sdk provides all of the tools, headers, and libraries that you need to build xpcom components.
... each module directory is divided into three subdirectories: module subdirectories the bin directory contains static libraries, dynamic libraries, and in some cases tools that may be useful in development.
... first, you need to get the sdk, this project uses the following tools to compile the extension for use.
...And 3 more matches
Index
MozillaTechXPCOMIndex
8 generating guids add-ons, developing mozilla, developing_mozilla:tools, extensions, tools, xpcom guids are used in mozilla programming for identifying several types of entities, including xpcom interfaces (this type of guids is callled iid), components (cid), and legacy add-ons—like extensions and themes—that were created prior to firefox 1.5.
... 64 nsiregistry xpcom:language bindings, xpconnect nsiregistry on mxr 65 xpcshell automated testing, developing mozilla, guide, javascript, javascript:tools, tools, xpcom, xpcom:language bindings, xpconnect xpcshell is an xpconnect-enabled javascript shell.
... 68 withjsmodulesandchrome moved to howto 69 xpcshell reference automated testing, developing mozilla, javascript, javascript:tools, tools, xpcom:language bindings, xpconnect the command-line syntax for xpcshell is: 70 xpcshell test manifest expressions qa, testing xpcshell unit tests are run by specifying them in a manifest file.
...And 3 more matches
Virtualenv
creating a virtualenv installs setuptools (or optionally distribute) into the virtual environment.
... it will require it to be part of a clone of the github repository or have internet access to fetch setuptools.
... using virtualenv once you have virtualenv installed, you can make virtual environments: > virtualenv tmp new python executable in tmp/bin/python installing setuptools............done.
...And 3 more matches
Web applications and ARIA FAQ - Accessibility
no live region support currently note: early versions of these tools often had partial or buggy aria implementations.
...as a result, pages that include aria may not validate using tools such as the w3c's markup validator.
...are there any tools available for free?
...And 3 more matches
Performance fundamentals - Web Performance
in the context of open web apps, this document explains in general what performance is, how the browser platform helps improve it, and what tools and processes you can use to test and improve it.
...from a developer's or user's perspective, this answers the question, "what does the platform do for you?" web technologies the web platform provides many tools, some better suited for particular jobs than others.
... general application performance analysis firefox, chrome, and other browsers include built-in tools that can help you diagnose slow page rendering.
...And 3 more matches
Extension Etiquette - Archive of obsolete content
user interface tools menu items using the tool menu option gives the author the maximum amount of choices.
... whether the extensions should go at the top, bottom, or somewhere in between on the tools menu, the author always has a choice.
... ideally, the location would be below the add-ons item, grouped with the other extension-related commands (menuitem:insertafter="javascriptconsole,devtoolsseparator").
...And 2 more matches
Signing an XPI - Archive of obsolete content
in my case it's c:\apps\nspr-4.6\ add path add the nss tools bin/ and lib/, and the nspr lib/ directories to the system path.
... you can either set this permanently via control panel->system properties->advanced->environment variables->system variables or do it each time you run the tools from the command-line (preferably using a batch file).
... don't forget to delete the certificate from mozilla firefox once you've finished testing firefox 1.5: from the tools menu choose options->advanced->security->view certificates->authorities firefox 1.0: from the tools menu choose options->advanced->certificates->manage certificates->authorities press the import button.
...And 2 more matches
Menu - Archive of obsolete content
ArchiveMozillaJetpackUIMenu
the actual menu is up to jetpack, but currently it is the tools menu.
... in the future it may be a submenu of the tools menu, for example.
... no one likes it when add-ons clutter her tools menu willy-nilly.
...And 2 more matches
Plug-n-Hack Phase1 - Archive of obsolete content
plug-n-hack (pnh) phase 1 allows easier integration and defines how security tools can advertise their capabilities to browsers.
... security tool manifest to support pnh-1 security tools provide a manifest over http(s) which defines the capabilities that the browser can make use of.
... the configuration document should then listen for a number of other events: configuresectoolstarted - this notifies the document that the browser is processing the configuration; if this event is not received within a reasonable amount of time after the configuresectool event has been fired, you might want to warn the user that pnh does not seem to be supported by this browser (perhaps prompting them to install the appropriate addon).
...And 2 more matches
Remotely debugging Firefox for Metro - Archive of obsolete content
this article explains how to use remote debugging to inspect and code running in the new windows 8 ("metro-style") firefox app, using the developer tools in firefox on the desktop.
... set up firefox for metro go to about:config in firefox for metro, and set the following required preference: devtools.debugger.remote-enabled = true you may also want to set these optional preferences: devtools.debugger.force-local = false (if you want to connect from a different machine over the network) devtools.debugger.remote-host (to change the tcp hostname where firefox will listen for connections) devtools.debugger.remote-port (to change the tcp port number where firefox will listen for connections...
...) devtools.debugger.prompt-connection = false (allow connections without displaying a confirmation prompt.
...And 2 more matches
Index - Game development
webgl is basically an opengl es 2.0 for the web — it's a javascript api providing tools to build rich interactive animations and of course, also games.
... 16 building up a basic demo with a-frame 3d, a-frame, vr, virtual reality, web, webgl the webxr and webgl apis already enable us to start creating virtual reality (vr) experiences inside web browsers, but the community is still waiting for tools and libraries to appear, to make this easier.
...the good thing is that you have a choice and can pick whatever tools suit you best.
...And 2 more matches
Debugging HTML - Learn web development
this article will introduce you to some tools that can help you find and fix errors in html.
... objective: learn the basics of using debugging tools to find problems in html.
... debugging doesn't have to be scary though — the key to being comfortable with writing and debugging any programming language or code is familiarity with both the language and the tools.
...And 2 more matches
Server-side web frameworks - Learn web development
they provide tools and libraries that simplify common web development tasks, including routing urls to appropriate handlers, interacting with databases, supporting sessions and user authorization, formatting output (e.g.
... web frameworks provide tools and libraries to simplify common web development operations.
...get it yourself: some web frameworks include tools/libraries that address every problem their developers can think "by default", while more lightweight frameworks expect web developers to pick and choose solution to problems from separate libraries (django is an example of the former, while flask is an example of a very light-weight framework).
...And 2 more matches
Framework main features - Learn web development
transformation is an extra step in the development process, but framework tooling generally includes the required tools to handle this step, or can be adjusted to include this step.
...testing tools are not built into the frameworks themselves, but the command-line interface tools used to generate framework apps give you access to the appropriate testing tools.
... each framework has extensive tools in its ecosystem, with capabilities for unit and integration testing alike.
...And 2 more matches
Getting started with Svelte - Learn web development
we will see how svelte works and what sets it apart from the rest of the frameworks and tools we've seen so far.
...it arguably has fewer concepts and tools to learn than some of the other framework options.
...gitbash (which comes as part of the git for windows toolset) or windows subsystem for linux (wsl) are both suitable.
...And 2 more matches
Strategies for carrying out testing - Learn web development
your main work machine can also be a place to install other tools for specific purposes, such as accessibility auditing tools, screen readers, and emulators/virtual machines.
... note: we also need to consider accessibility — there are a number of useful tools you can install on your machine to facilitate accessibility testing, but we'll cover those in the handling common accessibility problems article, later in the course.
... there are also commercial tools available such as sauce labs, browser stack and lambdatest that do this kind of thing for you, without you having to worry about the setup, if you wish to invest some money in your testing.
...And 2 more matches
Deploying our app - Learn web development
previous overview: understanding client-side tools in the final article in our series, we take the example toolchain we built up in the previous article and add to it so that we can deploy our sample app.
...parcel (and indeed many other tools) will generate filenames that are unique to each new build.
...these tools are added as devdependancies to the project via npm install --dev eslint prettier eslint-plugin-react (the eslint plugin is needed because this particular project uses react).
...And 2 more matches
Capturing a minidump
minidumps are files created by various windows tools which record the complete state of a program as it's running, or as it was at the moment of a crash.
... install debugging tools for windows microsoft distributes the debugging tools for windows for free, those include windbg which you will need here.
... download it from install debugging tools for windows.
...And 2 more matches
Simple Sunbird build
installing build tools if your system is not listed below, see the build prerequisites page.
... ubuntu linux: sudo apt-get build-dep sunbird sudo apt-get install mercurial libasound2-dev libcurl4-openssl-dev libnotify-dev libiw-dev autoconf2.13 cvs fedora linux: sudo yum groupinstall 'development tools' 'development libraries' 'gnome software development' sudo yum install mercurial autoconf213 glibc-static libstdc++-static yasm wireless-tools-devel mesa-libgl-devel mac: install xcode tools.
... insert "mac os x install disc 2", then open xcodetools.mpkg.
...And 2 more matches
Initial setup
as a pre-requisite to contributing to the l10n program, you need to have access to code, tools, and a properly configured local environment (i.e., your personal computer).
...here we'll go over the accounts you need as well as the tools and their configurations you need to set up before contributing.
... web-based l10n tools we'll talk about these in a little bit.
...And 2 more matches
QA phase
manual & automated builds with the click of a button, some l10n tools (like narro and koala) automatically create language pack builds for you.
... if you're using one of these tools, feel free to skip ahead to the seeing your work section.
... if you're not using one of these tools, let's walk you through building your own language pack manually.
...And 2 more matches
Profiling with Xperf
installation for all versions, the tools are part of the latest windows 7 sdk (sdk version 7.1).
... use the web installer to install at least the "win32 development tools".
... once the sdk installs, execute either wpt_x86.msi or wpt_x64.msi in the redist/windows performance toolkit folder of the sdk's install location (typically program files/microsoft sdks/windows/v7.1/redist/windows performance toolkit) to actually install the windows performance toolkit tools.
...And 2 more matches
certutil
by default, the tools (certutil, pk12util, modutil) assume that the given security databases follow the more common legacy type.
...for example: $ certutil -l -d sql:/home/my/sharednssdb to set the shared database type as the default type for the tools, set the nss_default_db_type environment variable to sql: export nss_default_db_type="sql" this line can be set added to the ~/.bashrc file to make the change permanent.
... o http://tools.ietf.org/html/rfc5280 o http://tools.ietf.org/html/rfc1113 o http://tools.ietf.org/html/rfc1485 the nss wiki has information on the new database design and how to configure applications to use it.
...And 2 more matches
WebReplayRoadmap
this document describes existing, planned, and potential features for the firefox developer tools that are based on web replay, along with their ui.
... retroactive console logging console logging is one of the primary tools most developers use to debug a page.
... this is based on the logpoints feature in the debugger, which can be enabled with the devtools.debugger.features.log-points preference.
...And 2 more matches
Generating GUIDs
there are a number of tools that can be used to generate a guid in the canonical form.
... online tools generate guid online uuid (guid) generator on the web uuid generator for mozilla code (both idl and c++.h forms) you can get a guid from one of the bots (such as botbot, firebot) on #firefox irc channel by /msging "uuid" to them.
... perl jkeiser's mozilla tools include a uuid generator with output format of both c++ and idl style.
...And 2 more matches
Index - Web APIs
WebAPIIndex
2257 lockedfile api, files, reference, référence(2) the lockedfile interface provides tools to deal with a given file with all the necessary locks.
... 4172 streams api concepts api, streams, concepts the streams api adds a very useful set of tools to the web platform, providing objects allowing javascript to programmatically access streams of data received over the network and process them as desired by the developer.
... 4586 tools for analyzing web audio usage api, audio, debugging, media, tools, web, web audio, web audio api, sound while working on your web audio api code, you may find that you need tools to analyze the graph of nodes you create or to otherwise debug your work.
...And 2 more matches
Animation performance and frame rate - Web Performance
while performance is sensitive to the particular system and its load, performance tools can help you understand the work the browser's doing to render your site, and help you prevent and diagnose problems when they occur.
...let's take a look at how we can use browser tools to inspect the frame rate.
...using these tools you can measure an application's animation frame rate, and diagnose performance bottlenecks if any are found.
...And 2 more matches
/loader - Archive of obsolete content
oader'); let loader = loader({ paths: { // resolve all modules starting with `toolkit/` as follows: // toolkit/foo -> resource://gre/modules/commonjs/toolkit/foo.js // toolkit/foo/bar -> resource://gre/modules/commonjs/toolkit/foo/bar.js 'toolkit/': 'resource://gre/modules/commonjs/toolkit/', // resolve all other non-relative module requirements as follows: // devtools/gcli -> resource:///modules/devtools/gcli.js // panel -> resource:///modules/panel.js '': 'resource:///modules/', } }) all relative url require() statements (those that start with ".") are first resolved relative to the requirer module id and the result of it is then resolved using the paths option.
...oader'); let loader = loader({ paths: { // resolve all modules starting with `toolkit/` as follows: // toolkit/foo -> resource://gre/modules/commonjs/toolkit/foo.js // toolkit/foo/bar -> resource://gre/modules/commonjs/toolkit/foo/bar.js 'toolkit/': 'resource://gre/modules/commonjs/toolkit/', // resolev all other non-relative module requirements as follows: // devtools/gcli -> resource:///modules/devtools/gcli.js // panel -> resource:///modules/panel.js '': 'resource:///modules/', // allow relative urls and resolve them to add-on root: // ./main -> resource://my-addon/root/main.js './': 'resource://my-addon/root/' } }); the order of keys in paths is irrelevant since they are sorted by keys from longest to shorte...
... console: { log: dump.bind(dump, "log: "), info: dump.bind(dump, "info: "), warn: dump.bind(dump, "warn: "), error: dump.bind(dump, "error: ") } }, modules: { // expose legacy api via pseudo modules that eventually may be // replaced with a real ones :) "devtools/gcli": cu.import("resource:///modules/gcli.jsm", {}), "net/utils": cu.import("resource:///modules/netutil.jsm", {}) } }); loader instances the loader produces instances that are nothing more than representations of the environment into which modules are loaded.
...it examines each element until it finds the prefix matching the supplied id and replaces it with the location it maps to: let mapping = [ [ 'sdk/', 'resource://gre/modules/commonjs/sdk/' ], [ './', 'resource://my-addon/' ], [ '', 'resource:///modules/' ] ]; resolveuri('./main', mapping); // => resource://my-addon/main.js resolveuri('devtools/gcli', mapping); // => resource:///modules/devtools/gcli.js resolveuri('sdk/core/promise', mapping); // => resource://gre/modules/commonjs/sdk/core/promise.js override() this function is used to create a fresh object that contains own properties of two arguments it takes.
Source code directories overview - Archive of obsolete content
xpidl files have their own mini-language and processing tools.
... tools contains scripts for automatically generating certain source code and other special tools for building this module.
... tools contains c code for the linux-only leaky tool.
... xpcom contains the low-level c interfaces, c code, c code, a bit of assembly code and command line tools for implementing the basic machinery of xpcom components (which stands for "cross platform component object model").
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
you can access it in mozilla by going to tools -> web development -> javascript console or in firefox (the standalone browser product from mozilla) at tools -> javascript console.
...javascript console evaluating mozilla's javascript engine has built-in support for debugging, and thus can provide powerful tools for javascript developers.
...it is usually bundled with mozilla releases; you can find it at tools -> web development -> javascript debugger.
...mozilla will indicate the rendering mode in view -> page info (or ctrl+i) ; firefox will list the rendering mode in tools -> page info.
New Skin Notes - Archive of obsolete content
--nickolay 01:59, 25 aug 2005 (pdt) i'm planning on doing up a special skin for editors in the future (with the edit tools and such closer to the top, etc).
...--nickolay 04:43, 25 aug 2005 (pdt) the skin won't be that different -- it will just have the editor tools moved around.
... oh, i went back to login page, logged in and then from there went to the /test/ pages and it's like the old look (with menu bar at the left), where indeed, the logout link is as it should be on the left in personal tools.
...--dria further notes and ideas (future) skin designed more for the editorial crowd, with the editor tools more prominently placed in the skin.
Tamarin build documentation - Archive of obsolete content
- run the android sdk/avd manager at /android-public/android-sdk-mac_86/tools/android and add android sdk platform-tools (to get adb), sdk platform android 2.3.3, and api 10 (samples and docs are optional).
... if you have trouble starting the app try this: $ export android_swt=$android_build_top/android-sdk-mac_86/tools/lib/x86_64 where $android_build_top is the full path to your sdk/ndk top folder - get the openssl-0.9.8r.tar (openssl-1.0.0c.tar.gz won't work) openssl files from http://www.openssl.org (use the source link on the left).
...tamarin-redux - export the following variables into the environment $ export android_toolchain=<full path to your android sdk/ndk top folder> $ export android_ndk=$android_toolchain/android-ndk $ export android_ndk_bin=$android_ndk/toolchains/arm-linux-androideabi-4.4.3/prebuilt/darwin-x86/bin $ export android_sdk=$android_toolchain/android-sdk-mac_86 $ export path=$path:$android_sdk/platform-tools:$android_ndk_bin - example commands to build tamarin: $ hg clone http://hg.mozilla.org/tamarin-redux $ cd tamarin-redux $ mkdir objdir-release $ cd objdir-release $ ../configure.py --arm-arch=armv7-a --target=arm-android $ make to make a debug shell use this command: ../configure.py --enable-debug --arm-arch=armv7-a --target=arm-android using cross-platform scripts in cygwin on windows: ...
...vs_home_path="/cygdrive/c/program files/microsoft visual studio 9.0" vs_home="c:\program files\microsoft visual studio 9.0" export path="$vs_home_path/common7/ide:$vs_home_path/vc/bin:$vs_home_path/common7/tools:$vs_home_path/vc/vcpackages:$path" export include="$vs_home\vc\atlmfc\include;$vs_home\vc\include;c:\program files\microsoft sdks\windows\v6.0a\include;" export lib="$vs_home\vc\atlmfc\lib;$vs_home\vc\lib;c:\program files\microsoft sdks\windows\v6.0a\lib" export libpath="$vs_home\vc\atlmfc\lib;$vs_home\vc\lib;c:\program files\microsoft sdks\windows\v6.0a\lib" with the above setup you should now...
Custom toolbar button - Archive of obsolete content
(for seamonkey 1.x, see the page custom toolbar button:seamonkey.) you do not need any special technical skills or tools, and almost all the information you need is on this page.
... required tools you will need two tools.
... optional tools you can optionally use any image editor to customize the images.
... to open the javascript console, choose tools – web developer- browser console, and enable js.
Archived Mozilla and build documentation - Archive of obsolete content
it also includes tools for looking at checkin logs (and comments); doing diffs between various versions of a file; and finding out which person is responsible for changing a particular line of code ("cvsblame").
...in firefox, the error console can be opened from the tools menu or by ctrl-shift-j.
... plug-n-hack plug-n-hack (pnh) is a proposed standard from the mozilla security team for defining how security tools can interact with browsers in a more useful and usable way.
...the contents of this standalone xpcom in general are: stress testing consume.exe from the windows server 2003 resource kit tools can consume various resources: physical memory, cpu time, page file, disk space and even the kernel pool.
Sunbird Theme Tutorial - Archive of obsolete content
to make a theme, you usually need these tools: a jar tool or zip tool an editor for plain text files software for creating and editing images note: some zip tools only work with files whose names have <tt>.zip</tt> at the end.
...you also need knowledge of: using your operating system to create files and directories using the tools listed above css graphic design knowledge of xul, xbl and javascript is useful for advanced themes.
...from the menu bar, choose tools – themes...
...to detect errors, choose tools – javascript console...
Game distribution - Game development
you can put your html5 games into the same arena (see native desktop, later on) and you should because it's good to diversify the platforms you support, but you have to remember that developers creating desktop games have years of experience, great tools and stable distribution channels.
...the good thing is that you don't need a few separate teams working on the same game for different platforms — you can build it once and use tools like phonegap or cocoonio to package the game for native stores.
... available tools there are various tools to choose from depending on your skills, preferred frameworks or target platforms.
... other alternative tools are: intel xdk — an exciting alternative, similar to cocoonio.
How do you upload your files to a web server? - Learn web development
this article shows you how to publish your site online using file transfer tools.
... objective: learn how to push files to a server using the various file transfer tools available.
...see publishing tools for more information.
... rsync gui tools as with other command line tools, gui tools also exist for rsync, for those who are not as comfortable with using the command line.
Installing basic software - Learn web development
overview: getting started with the web next in installing basic software, we show you what tools you need to do simple web development and how to install them properly.
... what tools do the professionals use?
... more tools besides!
... what tools do i actually need, right now?
The web and web standards - Learn web development
it'll take you a few months to really start to get into it, and then you'll need to keep learning so that your knowledge stays up-to-date with all the new tools and features that appear on the web platform, and keep practicing and refining your craft.
...: let pelem = document.queryselector('p'); pelem.textcontent = 'we changed the text!'; in the house analogy, javascript is like the cooker, tv, microwave, or hairdryer — the things that give your house useful functionality tooling once you've learned the "raw" technologies that can be used to build web pages (such as html, css, and javascript), you'll soon start to come across various tools that can be used to make your work easier or more efficient.
... examples include: the developer tools inside modern browsers that can be used to debug your code.
... testing tools that can be used to run tests to show whether your code is behaving as you intended it to.
Tips for authoring fast-loading HTML pages - Learn web development
tools such as html tidy can automatically strip leading whitespace and extra blank lines from valid html source.
... other tools can "compress" javascript by reformatting the source or by obfuscating the source and replacing long identifiers with shorter versions.
... moreover, valid markup allows for the free use of other tools which can pre-process your web pages.
...consider compressing your images before adding them to your page, using compression features built into image-manipulation tools such as photoshop, or using a specialized tool such as compress jpeg or tiny png,.
Responsive images - Learn web development
previous overview: multimedia and embedding next in this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools html provides to help implement them.
...css arguably has better tools for responsive design than html, and we'll talk about those in a future css module.
...when testing it with a mobile browser, you can use tools like firefox's about:debugging page to inspect the page loaded on the mobile using the desktop developer tools.
... to see which images were loaded, you can use firefox devtools's network monitor tab.
Introduction to web APIs - Learn web development
relationship between javascript, apis, and other javascript tools so above, we talked about what client-side javascript apis are, and how they relate to the javascript language.
... let's recap this to make it clearer, and also mention where other javascript tools fit in: javascript — a high-level scripting language built into browsers that allows you to implement functionality on web pages/apps.
...examples include jquery, mootools and react.
... the pinterest api provides tools to manage pinterest boards and pins to include them in your website.
A first splash into JavaScript - Learn web development
then go into the developer tools javascript console, and enter the following line: checkguess(); after pressing return/enter, you should see an alert come up that says "i am a placeholder"; we have defined a function in our code that creates an alert whenever we call it.
... if you haven't already done so, save your code, refresh the page in your browser, and open the developer tools javascript console.
... to start with, go to your browser developer tools javascript console again, and enter the following: for (let i = 1 ; i < 21 ; i++) { console.log(i) } what happened?
... next, open your browser developer tools, and make sure the javascript console tab is open.
Introduction to client-side frameworks - Learn web development
developers who worked with javascript wrote tools to solve the problems they faced, and packaged them into reusable packages called libraries, so they could share their solutions with others.
...these tools make it easy to add things like testing (to ensure that your application behaves as it should) or linting (to ensure that your code is error-free and stylistically consistent).
... things to consider when using frameworks being an effective web developer means using the most appropriate tools for the job.
... alternatives to client-side frameworks if you’re looking for tools to expedite the web development process, and you know your project isn’t going to require intensive client-side javascript, you could reach for one of a handful of other solutions for building the web: a content management system server-side rendering a static site generator content management systems content-management systems (cmses) are any tools that allow a user to create content f...
Git and GitHub - Learn web development
the most popular vcs (at least among web developers) is git, along with github, a site that provides hosting for your repositories and several tools for working with them.
... vcses provide tools to meet the above needs.
... git is an example of a vcs, and github is a web site + infrastructure that provides a git server plus a number of really useful tools for working with git repositories individually or in teams, such as reporting issues with the code, reviewing tools, project management features such as assigning tasks and task statuses, and more.
... note: github is not the only site/toolset you can use with git.
Creating reftest-based unit tests
mozilla has used html generation tools in the past.
...tools like this may be more useful now that we have reftest to exercise the files.
... register them in the chrome package in layout/tools/reftest/jar.mn, and reference the chrome uris in the manifest file (see an example).
... references http://old.nabble.com/please-add-%22in-testsuite-%22-to-layout-bugs-when-resolving-them!-td7787412.html further documentation: layout/tools/reftest/readme.txt ...
SVG Guidelines
in general the best way to combat this is to first run svg files through a linter such as svgo (see the tools section below).
... tools tools can help to clean svg files.
... note, however that some of the rules stated above can be hard to detect with automated tools since they require too much context-awareness.
.../svg/svgo alternatives to svgo: https://github.com/razrfalcon/svgcleaner https://github.com/scour-project/scour gui for command line tool (use with "prettify code" and "remove <title>" options on): https://jakearchibald.github.io/svgomg/ good alternative to svgo/svgomg: https://petercollingridge.appspot.com/svg-editor fixes the excessive number precision: https://simon.html5.org/tools/js/svg-optimizer/ converts inline styles to svg attributes: https://www.w3.org/wiki/svgtidy raphaeljs has a couple of utilities that may be useful: raphael.js ...
Gecko SDK
the gecko sdk, also known as the xulrunner sdk, is a set of xpidl files, headers and tools to develop xpcom components which can then in turn e.g.
...the gecko sdk is a collection of header files and tools used to develop general xpcom components which add functionality to the existing platform, whereas xulrunner is a framework which can be used to run standalone or embedded applications based on the mozilla framework.
... the gecko sdk contains all of the necessary tools and headers for making scriptable npapi plugins including the xpidl compiler/linker and the latest npapi.h.
... contents of the sdk the sdk contains the following: 1.9.2 idl files for frozen interfaces (under idl/) header files for frozen interfaces, xpcom functions, and nspr functions (under include/) import libraries or shared libraries (under lib/) static utility libraries (under lib/) various tools (under bin/) for more information about safely linking xpcom components using the xpcom "glue" library, see xpcom glue.
source-editor.jsm
the source-editor.jsm javascript code module implements an editor specifically tailored for editing source code; its primary purpose is to provide support for web developer tools to display and edit web site code.
... constant value description sourceeditor.prefs.component "devtools.editor.component" a string indicating the name of the source editor engine to use; this is "orion" by default.
... sourceeditor.prefs.expand_tab "devtools.editor.expandtab" a boolean value that indicates whether or not to automatically expand tabs out to a series of spaces.
... sourceeditor.prefs.tab_size "devtools.editor.tabsize" an integer value that specifies the number of spaces per tab.
TraceMalloc
analyzing the trace-malloc log tools such as bloatblame (tools/trace-malloc/bloatblame.cpp) can be used to process filename.
...this file can be post-processed by tools in mozilla/tools/trace-malloc as follows: histogram.pl, which produces a type histogram that can be diffed with histogram-diff.sh to produce output that looks like this: ---- base ---- ---- incr ---- ----- difference ---- type count bytes count bytes count bytes %total total 48942 4754774 76136 6566453 27194 1811679 100.00 nstokenall...
...build/dist/minefield.app/contents/macos/firefox --trace-malloc /dev/null --shutdown-leaks=sdleak.log # convert raw log to text representation of call trees perl source/tools/trace-malloc/diffbloatdump.pl --depth=15 --use-address /dev/null sdleak.log > sdleak.tree.raw # frobulate trees to remove extraneous junk perl source/tools/rb/fix-macosx-stack.pl sdleak.tree.raw > sdleak.tree you can also use the leakstats program to analyze a log for shutdown leaks.
...<script type="text/javascript"> var filename = window.prompt("filename to log: "); if (filename) tracemallocdumpallocations(filename); </script> one can then use the script tools/trace-malloc/diffbloatdump.pl to compare trace-malloc dumps before and after doing an action that might leak.
SpiderMonkey Build Documentation
before you begin, make sure you have the right build tools for your computer: linux, windows, mac, others.
...refer the release notes under command line tools -> new features the release notes also states that this compatibility package will no longer be provided in the near future, so the build system on macos will have to be adapted to look for headers in the sdk until then, the following should help, open /library/developer/commandlinetools/packages/macos_sdk_headers_for_macos_10.14.pk this builds an executable named js in the directory buil...
... for a list of other available build options, type (assuming the current working directory is one of the above-created build directories): /bin/sh ../configure.in --help generating a compilation database some tools (like ides, static analyzers and refactoring tools) consume a file called compile_commands.json which contains a description of all the pieces required to build a piece of software so that tools don't have to also understand a build system.
...before you begin, make sure you have right build tools for your computer: linux, windows, mac, others.
Hacking Tips
on https://github.com/h4writer/tracelogger you can find the instructions to create the graph (tools v2 > 1.
...this can be done with the reduce.py script in https://github.com/haytjes/tracelogger/tree/master/tools_v2.
...these tools will show the mir & lir steps done by ionmonkey during the compilation.
... on linux, you can manage the resources available to one program by using cgroup, and to do you can install libcgroup which provides some convenient tools such as cgexec to wrap the program that you want to benchmark.
Zest
overview zest is an experimental specialized scripting language (also known as a domain-specific language) developed by the mozilla security team and is intended to be used in web oriented security tools.
...the core language does not define any graphical representation - that is expected to be defined by the tools that integrate zest.
... anyone can contribute to the onward development of zest, and teams or individuals who develop security tools are especially welcome to join and help shape zest's future.
... zest topics usecases reporting security vulnerabilities to developers reporting security vulnerabilities to companies defining active and passive scanner rules deep integration with security tools runtimes the runtime environments that support zest tools the tools that include support zest implementation the state of zest development videos simon demoed zest at appsec usa in november 2013, and the full video of my talk is available on youtube.
An Overview of XPCOM
but xpcom also provides several tools and libraries that enable the loading and manipulation of these components, services that help the developer write modular cross-platform code, and versioning support, so that components can be replaced or upgraded without breaking or having to recreate the application.
...xpcom has tools to make it even easier, as we describe later.
...though there are tools and better ways to handle singletons (which we'll discuss when we talk about the nsiservicemanager), a developer may want to use this information to ensure that only one singleton object can exist despite what the callers do.
... writing components in other languages though you do not have access to some of the tools that xpcom provides for c++ developers (such as macros, templates, smart pointers, and others) when you create components in other languages, you may be so comfortable with the language itself that you can eschew c++ altogether and build, for example, python-based xpcom components that can be used from javascript or vice versa.
How to build a binary XPCOM component using Visual Studio
you also need a couple of pre-built libraries (glib-1.2.dll & libidl-0.6.dll) from the wintools.zip archive.
... note: wintools.zip seems old and lots of newer mdc documentation refers to moztools.zip archive, but the version of xpidl.exe that comes with the gecko-sdk crashes with the dll’s from moztools.
... recap: use the right gecko sdk for your xulrunner release use a microsoft compiler use pre-built glib-1.2.dll & libidl-0.6.dll libraries from wintools.zip download the sample project here is what the folder structure looks like: create a vc++ project visual studio project and file templates (or wizards) for creating xpcom modules and components do not currently exist.
...dd "..\gecko-sdk\include" to additional include directories add "..\gecko-sdk\lib" to additional library directories add "nspr4.lib xpcom.lib xpcomglue_s.lib" to additional dependencies add "xp_win;xp_win32″ to preprocessor definitions turn off precompiled headers (just to keep it simple) use a custom build step for the xpcom idl file (spawns xpidl-build.bat to process the idl with mozilla toolset, not midl) vc++ express project: xpcom-test.zip note: the project uses xpcom_glue.
CSS: Cascading Style Sheets
WebCSS
we have covered the necessary prerequisites so we can now dive deep into css layout, looking at different display settings, modern layout tools like flexbox, css grid, and positioning, and some of the legacy techniques you might still want to know about.
... tools for css development you can use the w3c css validation service to check if your css is valid.
... firefox developer tools lets you view and edit a page's live css via the inspector and style editor tools.
... the web community has created various other miscellaneous css tools for you to use.
Setting up adaptive streaming media sources - Developer guides
apple provides tools to convert media files to the appropriate format.
... hls encoding tools ther are a number of useful tools available for hls encoding for hls live stream encoding adobe provide a media encoder for mac.
... note: you can find more details about these tools at using http live streaming.
... http live streaming overview mpeg-dash overview and references dynamic adaptive streaming over http dataset mpeg-dash and streaming reference and resources (msdn) dash adaptive streaming for html 5 video dynamic adaptive streaming over http: from content creation to consumption mpeg-dash tools dashencoder mp4box dash.js wiki dash.js google group akamai dash diagnostic player adaptive streaming examples itec – dynamic adaptive streaming over http mpeg dash media source demo ...
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
fortunately, there are tools available that can help you.
... fleshing out the palette once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors.
... many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness.
... a few examples (all free to use as of the time this list was last revised): mdn's color picker tool paletton adobe color cc online color wheel when designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.
JavaScript
intermediate understanding client-side javascript frameworks javascript frameworks are an essential part of modern front-end web development, providing developers with proven tools for building scalable, interactive web applications.
... this module gives you some fundamental background knowledge about how client-side frameworks work and how they fit into your toolset, before moving on to tutorial series covering some of today's most popular ones.
... tools & resources helpful tools for writing and debugging your javascript code.
... firefox developer tools web console, javascript profiler, debugger, and more.
WebAssembly Concepts - WebAssembly
it has many advantages — it is dynamically typed, requires no compile step, and has a huge ecosystem that provides powerful frameworks, libraries, and other tools.
... the webassembly ecosystem is at a nascent stage; more tools will undoubtedly emerge going forward.
... writing webassembly directly do you want to build your own compiler, or your own tools, or make a javascript library that generates webassembly at runtime?
...you can write or generate this format by hand and then convert it into the binary format with any of several webassemby text-to-binary tools.
Developing for Firefox Mobile - Archive of obsolete content
enable usb debugging on the device (step 2 of this link only) on the development machine: install version 1.5 or higher of the add-on sdk install the correct version of the android sdk for your device using the android sdk, install the android platform tools next, attach the device to the development machine via usb.
...android platform tools will have installed adb in the "platform-tools" directory under the directory in which you installed the android sdk.
... make sure the "platform-tools" directory is in your path.
Add-on SDK - Archive of obsolete content
the sdk includes javascript apis, which you can use to create add-ons and tools for creating, running, testing, and packaging add-ons.
...this guide includes a comparison of the two toolsets and a working example of porting a xul add-on.
... tools reference reference documentation for the jpm tool used to develop, test and package add-ons, the console global used for logging, and the package.json file.
Index of archived content - Archive of obsolete content
on/toggle ui/frame ui/id ui/sidebar ui/toolbar util/array util/collection util/deprecate util/list util/match-pattern util/object util/uuid window/utils release notes tools cfx cfx to jpm console jpm jpm-mobile jpmignore package.json tutorials add a context menu item add a menu item to firefox adding a button to the toolbar ...
... mozrunner nsc_setpin nanojit lir new security model for web services new skin notes overview of how downloads work plug-n-hack plug-n-hack get involved plug-n-hack phase1 plug-n-hack phase2 plug-n-hack tools supported plugin architecture porting nspr to unix platforms priority content prism blogposts build bundlelibrary bundles configuration extensions faq hostwindow installer scripting ...
... parallelarray properly using css and javascript in xhtml documents examples reference server-side javascript back to the server: server-side javascript on the rise sharp variables in javascript standards-compliant authoring tools stopiteration styling the amazing netscape fish cam page using javascript generators in firefox window.importdialog() writing javascript for xhtml xforms building mozilla xforms community developing mozilla xforms implementation status mozilla xforms spec...
Venkman Introduction - Archive of obsolete content
on windows, the javascript debugger compares favorably with visual interdev and other large web development tools.
...you can then access the debugger via a new, dynamically created menuitem in the tools menu of that browser, or else restart the browser with a special debugger option.
... there are two ways to start the debugger: from firefox, you can start it by selecting javascript debugger from the tools menu (tools->web development menu in mozilla 1.x and netscape).
Extensions - Archive of obsolete content
for instance: <menubar id="main-menubar"> <menu label="search" insertbefore="tools-menu"> <menupopup> <menuitem label="web"/> <menuitem label="mail"/> </menupopup> </menu> </menubar> this menu is added to the main menu bar just before the tools menu.
... the insertbefore attribute is set to 'tools-menu' to ensure that the new menu is added at the right place.
...for example, to add an item to the end of the tools menu, use the following: <menupopup id="menu_toolspopup"> <menuitem label="thesaurus"/> </menupopup> note that other extensions may be adding their own items into the same menus.
Menus - Archive of obsolete content
menu a label of a menu on a menubar, for instance 'file' or 'tools'.
... </menu> <menu id="tools-menu" label="tools"> ...
...for example, to have a tools menu that is shared between all windows, just create a menu in the overlay, and include it in each window with a single line: <menu id="menu-tools"/> the overlay should have a menu with the same id 'menu-tools' containing the complete definition of the menu.
Using Remote XUL - Archive of obsolete content
the bar consists of a set of links organized into four main categories: the mozilla organization, developer docs, testing, and tools.
... <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="the mozilla organization" /> <menu label="developer docs" /> <menu label="testing" /> <menu label="tools" /> <button label="faq" /> <button label="search" /> </menubar> <iframe src="https://www.mozilla.org/" flex="1" /> </window> the menubar element is a container for a series of menus.
... value="https://www.mozilla.org/releases/" /> <menuitem label="report a bug" value="https://bugzilla.mozilla.org/enter_bug.cgi?format=guided" /> <menuitem label="bugzilla" value="https://www.mozilla.org/bugs/" /> <menuitem label="bug writing" value="https://www.mozilla.org/quality/bug-writing-guidelines.html" /> </menupopup> </menu> <menu label="tools"> <menupopup> <menuitem label="view source" value="https://lxr.mozilla.org/seamonkey/" /> <menuitem label="tree status" value="https://tinderbox.mozilla.org/showbuilds.cgi?tree=seamonkey" /> <menuitem label="new checkins" value="https://bonsai.mozilla.org/cvsquery.cgi?treeid=default&amp;..." /> <menuitem label="submit a bug" value="https://bugzi...
XUL accessibility tool - Archive of obsolete content
use to launch the tool after installation, look for an entry in the tools menu of the host application, or hit ctrl+alt+shift+f12.
...improve tool along the way add checking tool to dom inspector or other popular xul debugging tools.
... merge with other xul checking tools -- this doesn't need to be a11y-specific.
Debugging a XULRunner Application - Archive of obsolete content
browser debugger as of gecko 44, it is no longer possible to start the devtools server from xul apps.
...add the following code to your xul app: components.utils.import('resource://gre/modules/devtools/dbg-server.jsm'); if (!debuggerserver.initialized) { debuggerserver.init(); // don't specify a window type parameter below if "navigator:browser" // is suitable for your app.
... debuggerserver.addbrowseractors("myxulrunnerappwindowtype"); } debuggerserver.openlistener(6000); for xulrunner version 37+ the code to enable the debugger has changed: components.utils.import('resource://gre/modules/devtools/dbg-server.jsm'); if (!debuggerserver.initialized) { debuggerserver.init(); debuggerserver.addbrowseractors(); debuggerserver.allowchromeprocess = true; } let dbglistener=debuggerserver.createlistener(); dbglistener.portorpath=6000; dbglistener.open(); add the following to your prefs.js: (in recent ffox, edit about:config instead) pref("devtools.debugger.remote-enabled", true); in firefox, go to tools > web developer > connect...
Archived open Web documentation - Archive of obsolete content
standards-compliant authoring tools creating cross-browser code upfront will save you lots of time quality testing your web content.
... the following authoring tools adhere to the w3 standards.
... if you're using older versions of tools that rely on old browser bugs or generate browser-specific code, it may be time to upgrade: stopiteration the stopiteration object was used to tell the end of the iteration in the legacy iterator protocol.
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
this also creates issues in regard to authoring tools for these various applications.
...would it be fiscally prudent to develop proprietary authoring tools for each application?
...adopting standards will not only help an organizations end users enjoy a cross application experience; organizations will help themselves by giving development and quality assurance engineers the tools to become better equipped and flexible.
The Business Benefits of Web Standards - Archive of obsolete content
web standards gives us tools, and methodologies for dealing with this paradox and making the wider contribution of making our content universally accessible to people in different social, medical and economic circumstances.
...using xhtml will enable web authors to leverage tools from the xml world, such as xslt, to easily manipulate xml data.
...using validation tools such as the w3c validator helps by spotting coding errors and making sure html code is well-formed, which eliminates ambiguity in parsing by browsers.
3D games on the Web - Game development
webgl is basically an opengl es 2.0 for the web — it's a javascript api providing tools to build rich interactive animations and of course, also games.
...using a framework for 3d games also helps optimize the performance as a lot is taken care of by the tools you use, so you can focus on building the game itself.
... other tools both unity and unreal can export your game to webgl with asm.js, so you're free to use their tools and techniques to build games that will be exported to the web.
Network throttling - MDN Web Docs Glossary: Definitions of Web-related terms
most browser developer tools, such as the browser inspector, provide a function to emulate different network conditions.
... browser developer tools generally have network throttling options, to allow you to test your app under slow network conditions.
... firefox's developer tools for example have a drop-down menu available in both the network monitor and responsive design mode containing network speed options (e.g.
What is accessibility? - Learn web development
overview: accessibility next this article starts the module off with a good look at what accessibility is — this overview includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.
...the main types of disability to consider are explained below, along with any special tools they use to access web content (known as assistive technologies, or ats).
...there is no need to learn all of the wcag — be aware of the major areas of concern, and use a variety of techniques and tools to highlight any areas that don't conform to the wcag criteria (see below for more).
CSS layout - Learn web development
we have covered the necessary prerequisites so we can now dive deep into css layout, looking at different display settings, modern layout tools like flexbox, css grid, and positioning, and some of the legacy techniques you might still want to know about.
... guides these articles will provide instruction on the fundamental layout tools and techniques available in css.
... floats originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages.
What text editors are available? - Learn web development
ession saving settings configure any available plugins and investigate how to get new ones change color schemes adjust view settings and see how you can change the layout of the views check what programming languages/technologies your editor supports while you're learning the default settings of most text editors should be fine to use, but it is important to become familiar with your chosen tools, so you can select the best one for your usage.
... you will learn more about customizing your editors and tools as you gain experience, and more importantly you will learn what features are more useful to your purposes.
...an ide provides many tools in one interface and it's a bit daunting for beginners, but always an option if your text editor feels too limited.
How can we design for all types of users? - Learn web development
the calculation may seem pretty complicated, but we can rely on tools to do the job for us.
...there are various tools to help you, either online or local: installed software.
... imageoptim (mac), optipng (all platforms), pngcrush (dos, unix/linux) online tools.
What software do I need to build a website? - Learn web development
you'll need tools to: create and edit webpages upload files to your web server view your website nearly all operating systems by default include a text editor and a browser, which you can use to view websites.
...if you want something a bit fancier, there are plenty of third-party tools available.
...(if you're going that route, microsoft has some tools for developers including a ready-to-use virtual machine at modern.ie.) by all means run some tests on a real device, especially on real mobile devices.
Sending form data - Learn web development
viewing http requests http requests are never displayed to the user (if you want to see them, you need to use tools such as the firefox network monitor or the chrome developer tools).
...after submitting the form: open the developer tools.
...it's more common to use one of the many high quality frameworks that make handling forms easier, such as: django for python (a bit more heavyweight than flask, but with more tools and options).
JavaScript basics - Learn web development
developers have written a variety of tools on top of the core javascript language, unlocking a vast amount of functionality with minimum effort.
... it's outside the scope of this article—as a light introduction to javascript—to present the details of how the core javascript language is different from the tools listed above.
...for more details on javascript consoles, see discover browser developer tools.
Getting started with the Web - Learn web development
you'll set up the tools you need to construct a simple webpage and publish your own simple code.
... installing basic software when it comes to tools for building a website, there's a lot to pick from.
... if you're just starting out, you might be confused by the array of code editors, frameworks, and testing tools out there.
Mozilla splash page - Learn web development
adding a video to the main article content just inside the <article> element (right below the opening tag), embed the youtube video found at https://www.youtube.com/watch?v=ojcncvb1olg, using the appropriate youtube tools to generate the code.
... note: to properly test the srcset/sizes examples, you'll need to upload your site to a server (using github pages is an easy and free solution), then from there you can test whether they are working properly using browser developer tools such as the firefox network monitor.
...glitch is probably better for this example, as it allows you upload assets like images, whereas some of the other tools don't.
Drawing graphics - Learn web development
previous overview: client-side web apis next the browser contains some very powerful graphics programming tools, from the scalable vector graphics (svg) language, to apis for drawing on html <canvas> elements, (see the canvas api and webgl).
...while you could use css and javascript to animate (and otherwise manipulate) svg vector images — as they are represented by markup — there was still no way to do the same for bitmap images, and the tools available were rather limited.
...as you'll see below, canvas provides many useful tools for creating 2d animations, games, data visualizations, and other types of app, especially when combined with some of the other apis the web platform provides.
What went wrong? Troubleshooting JavaScript - Learn web development
these are usually okay to fix, as long as you are familiar with the right tools and know what the error messages mean!
... fixing syntax errors earlier on in the course we got you to type some simple javascript commands into the developer tools javascript console (if you can't remember how to open this in your browser, follow the previous link to find out how).
... the name of the javascript file, which links through to the debugger tab of the developer tools.
JavaScript object basics - Learn web development
while working with this example you should have your developer tools javascript console open and ready to type in some commands.
...i\'m ' + this.name[0] + '.'); } }; after saving and refreshing, try entering some of the following into the javascript console on your browser devtools: person.name person.name[0] person.age person.interests[1] person.bio() person.greeting() you have now got some data and functionality inside your object, and are now able to access them with some nice simple syntax!
...the live version will give you a blank screen, but that's ok — again, open your devtools and try typing in the above commands to see the object structure.
Aprender y obtener ayuda - Learn web development
professional web developers use tools like mdn web docs to look up things they have forgotten all the time.
...for example: materials i need: a computer internet access pens and paper knowledge i need: how to use html, css, javascript, and associated tools and best practices to build web sites and web applications (we can definitely help you with this one!).
... in addition, the web has developer tools that allow you to look at the code used to build any site on the web — if you don't have a solution to hand, one good research method is to find websites with similar features in the wild, and find out how they did it.
Working with Svelte stores - Learn web development
go back to your app, try adding some todos, then go your developer tools web console.
... svelte won't force you to organize your state management in a specific way, it just provides the tools for you to choose how to handle it.
... you can also inspect it in the devtools console.
Introduction to cross browser testing - Learn web development
as a web developer, it is your responsibility to make sure that not only do your projects work, but they work for all your users, no matter what browser, device, or additional assistive tools they are using.
... finally, you can get smarter with your testing using auditing or automation tools; this is a sensible choice as your projects get bigger, as doing all this testing by hand can start to take a really long time.
...there are commercial tools available such as sauce labs, browser stack, endtest, lambdatest, testingbot, and crossbrowsertesting that do this kind of thing for you, without you having to worry about the setup, if you wish to invest some money in your testing.
Frequently Asked Questions for Lightweight themes
simply go to the tools > add-ons menu and click on the appearance tab.
...simply go to the tools > add-ons menu and click on the appearance tab.
... to undo the design you most recently selected, go to tools > add-ons in the menu bar and select the themes tab.
Add-ons
developing extensions in the past, there were several toolsets for developing firefox extensions, but as of november 2017, extensions must be built using webextensions apis.
... other toolsets, such as overlay add-ons, bootstrapped add-ons, and the add-on sdk, are no longer supported.
...you’ll find: overview of the firefox extension features tools and processes for developing and testing how to publish your extension on addons.mozilla.org or distribute it yourself how to manage your published extension an enterprise guide for developing and using extensions how to develop themes for firefox firefox developer communities extensions for firefox for android in 2020, mozilla will release a new firefox for android experience.
Benchmarking
async stacks async stacks no longer impact performance since firefox 78, as bug 1601179 limits async stack capturing to when devtools is opened.
... profiling tools currently the gecko profiler has limitations in the ui for inverted call stack top function analysis which is very useful for finding heavy functions that call into a whole bunch of code.
... some example tools include instruments on osx (part of xcode), rotateright zoom on linux (uses perf underneath), and intel vtune on windows or linux.
Debugging a hang on OS X (Archived)
creating the sample on mac os x 10.5 (xcode < 4.2) when the application is still hung, open up spin control.app (it’s in your <tt>/developer/applications/performance tools/</tt> folder; if it is missing, install the latest computer hardware understanding development (chud) tools from apple).
... creating the sample on mac os x 10.4 when the application is still hung, open up sampler.app (it’s in your <tt>/developer/applications/performance tools/</tt> folder; if it is missing, install the latest computer hardware understanding development (chud) tools from apple.).
...export it using tools > generate report, and attach this as a text file to the bug report.
Debugging on Windows
there are two ways to work around this problem: turn off automatic symbol downloading for system libraries: in tools > options > debugging > symbols, uncheck the microsoft symbol server.
... locate the microsoft utility "symchk.exe" on your system (it will likely be in the installation directory of your windows debugging tools).
... find the directory where visual studio caches downloaded symbols; in vc++ 10 open the menu to tools > options > debugging > symbols and copy the field "cache symbols in this directory".
How Mozilla's build system works
each tier consists of three sub-tiers: export, libs, and tools.
... tools is used to install tests and other support tools.
...then, it does the same thing for the libs sub-tier and, subsequently, the tools sub-tier.
Eclipse CDT
introduction eclipse cdt (c/c++ development tools) is an open-source ide for c and c++ development with advanced code assistance (inheritance/call graph explorer, jump to definition, refactoring, autocomplete, syntax highlighting, and so on).
... (while package managers like snap sometimes provide an eclipse package, they do not include the c++ developer tools.
...in the window that opens, click "add", and in the prompt set name to something like "nightly" and location to something like "http://download.eclipse.org/tools/cd...s/juno/nightly" (change "juno" to the current developer branch).
Contributing to the Mozilla code base
project skills documentation/onboarding firefox browser (core layers) c++ firefox developers documentation firefox (front-end) javascript and/or html/css firefox developers documentation devtools javascript and/or html/css contribute to devtools add-ons javascript and/or html/css contribute to add-ons firefox focus for android java contribute to firefox focus for android firefox for fire tv java contribute to firefox for fire tv firefox preview (mobile browser, codename: "fenix") kotlin contribute to firefox preview ...
... visit firefox-dev.tools - we list firefox developer tools bugs for new contributors.
... use a bug searching tool there are several tools developed by members of the mozilla community.
mach
check out the linting and analysis tools: $ ./mach lint $ ./mach static-analysis mach and mozconfigs it's possible to use mach with multiple mozconfig files.
... for example: $ cd devtools/client $ mach build webconsole # rebuild only the files in the devtools/client/webconsole directory $ mach mochitest webconsole/test # run mochitests in devtools/client/webconsole/test enable tab completion to enable tab completion in bash, run the following command.
...if you don't use mach, you have to find another solution for the following problems: discovering what commands or make targets are available (mach exposes everything through mach help while inside "mozilla-central" , else you'll just get a cryptic error message) making more sense out of command output (mach offers terminal colorization and structured logging) getting productive tools in the hands of others (mach "advertises" tools to people through mach help (unless it actually just gives you a cryptic error message) - in the former case, people don't need to discover your tool from a blog post, wiki page, or word of mouth).
Firefox
with broad compatibility, the latest in web technologies, and powerful development tools, firefox is a great choice for both web developers and end users.
...here you can learn about how to contribute to the firefox project and you will also find links to information about the construction of firefox add-ons, using the developer tools in firefox, and other topics.
... firefox profiles if you find yourself using multiple firefox channels—or just multiple configurations—on a regular basis, you should read how to use multiple firefox profiles by turning firefox's profile manager and other profile management tools to your advantage.
How to get a stacktrace with WinDbg
(to get a stacktrace for thunderbird or some other product, substitute the product name where ever you see firefox in this instructions.) requirements to get such a stacktrace you need to install the following software: debugging tools for windows microsoft distributes the debugging tools for windows for free, those include windbg which you will need here.
... download it from install debugging tools for windows.
...(start->all programs->debugging tools for windows->windbg) next, open the "file" menu and choose "open executable...".
Application Translation with Mercurial
required tools build pre-requisites first, get the required programs to compile mozilla applications like firefox and thunderbird from build instructions.
... launch the installed mozillabuild toolset by launching it with its path, e.g.
... c:\mozilla\coding\buildtools\mozillabuild\start-shell-msvc2010.bat you can autocomplete the file path after typing a few characters and then pressing the tabulator key.
Patching a Localization
prerequisites if you are to the point that you are patching existing localizations, we assume that you have the basic set of tools listed on the l10n prerequisites wiki page.
... if you do not have these tools, take a few steps back, grab a cookie (because, let's face it, you deserve it for all of your work), and visit the l10n prerequisites page.
... there you'll learn what tools you need, where to find them, and how to install them.
Localization quick start guide
along the way, you'll learn about the variety of projects you can contribute to and the tools used to localize them.
...in closing, when you finish this guide, you will have all the tools necessary to start contributing!
... translation phase l10n tools tutorials for translation.
Localization sign-off reviews
allows us to discover potential bugs within l10n tools.
...this is a common problem with some tools.
... encoding some tools add bom to utf-8 encoded files, and some change the encoding altogether.
Localization formats
ocalizer can see his/her changes more quickly creating simple diffs .lang files will be cached which will reduce any slowness effect disadvantage to .lang no plural forms no context for localizers unless you provide good comments no styling by localizers if it is needed may be slower because file is not compiled into binaries not used as a standard by any other localization project no tools to validate syntax, so a localizer may cause accidental errors that can cause breakage (level of breakage depends on level of error) cannot use po editor, which most localizers know and love gettext (.po) gettext is a widely-used localization format that uses .po files.
..." "allez-y et montrez-le en téléchargeant et en imprimant votre " "certificat personnalisé firefox 3 download day." advantages of gettext gettext has very powerful tools to update this site (if you use the actual english strings in msgids, not unique identifier strings like certificate_intro) very established with a large set of powerful tools harder to screw things up because existing tools will not allow localizers to edit the l10n file where they shouldn't separates localizable strings available for localizers for the rest of the code, protecting it from un...
...so, if a localizer wanted to use one of the many powerful gettext tools, like po-editor, the msgid provides no context for translation or for other localizers to verify translations when qa-ing.
Writing localizable code
about localizers a few notes about localizers for developers who rarely deal with them: localizers like tools, and they don't like editors, localization tools are often based on key-value pairs, at least some localizers have their talents focused on language skills and are not savvy in programming, or even building applications.
...this will more likely be a good key name, and it will help tools to pick up that the change you do is different from just a spell fix.
...there are few exceptions to this rule, but in general, the localized file should comply with standards and should not require build tools to be transformed.
BloatView
if it isn't, you should use the other tools to fix it.
... perl tools/bloatview/bloattable.pl log1 log2 ...
... perl tools/bloatview/bloatdiff.pl <previous-log> <current-log> this will give you output of the form: bloat/leak delta report current file: dist/win32_d.obj/bin/bloatlogs/all-1999-10-22-133450.txt previous file: dist/win32_d.obj/bin/bloatlogs/all-1999-10-16-010302.txt -------------------------------------------------------------------------- class leaks delta bloat ...
Memory Profiler
firefox developer tools now has a built-in memory profiler.
... using the add-on open the devtools panel or webide.
... understanding the profiles traditional memory analysis tools look at the data.
An overview of NSS Internals
there are tools for managing nss databases, for dumping or verifying certificates, for registering pkcs#11 modules with a database, for processing cms encrypted/signed messages, etc.
...in other words, if your browser or your server operates on an older nss database format, don't use the nss tools to operate on it while the other software is executing.
...however, if you want to work with the nss command line tools, you will have to follow the standalone nss build instructions, and build nss outside of the mozilla application sources.
NSS_3.12_release_notes.html
the tar.gz or zip file expands to an nss-3.12 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr 4.7.1 binary distributions to get the nspr 4.7.1 header files and shared libraries, which nss 3.12 requires.
...function that outputs all host names for dns name matching bug 315643: test_buildchain_resourcelimits won't build bug 353745: klocwork null ptr dereference in pkcs12 decoder bug 338367: the gf2m_populate and gfp_populate should check the eccurve_map array index bounds before use bug 201139: ssltap should display plain text for null cipher suites bug 233806: support nist crl policy bug 279085: nss tools display public exponent as negative number bug 363480: ocspclnt needs option to take cert from specified file bug 265715: remove unused hsearch.c dbm code bug 337361: leaks in jar_parse_any (security/nss/lib/jar/jarver.c) bug 338453: leaks in security/nss/lib/jar/jarfile.c bug 351408: leaks in jar_jar_sign_archive (security/nss/lib/jar/jarjart.c) bug 351443: remove unused code from mozilla/securi...
...298540: vfychain usage option should be improved and documented bug 323570: make dbck debug mode work with softoken bug 371470: vfychain needs option to verify for specific date bug 387621: certutil's random noise generator isn't very efficient bug 390185: signtool error message wrongly uses the term database bug 391651: need config.mk file for windows vista bug 396322: fix secutil's code and nss tools that print public keys bug 417641: miscellaneous minor nss bugs bug 334914: hopefully useless null check of out it in jar_find_next bug 95323: ckfw should support cipher operations.
Utilities for nss samples
these utility functions are adapted from those found in the sectool library used by the nss security tools and other nss test applications.
...*/ #ifndef _util_h #define _util_h #include <prlog.h> #include <termios.h> #include <base64.h> #include <unistd.h> #include <sys/stat.h> #include "util.h" #include <prprf.h> #include <prerror.h> #include <nss.h> #include <pk11func.h> /* * these utility functions are adapted from those found in * the sectool library used by the nss security tools and * other nss test applications.
...*/ #include "util.h" /* * these utility functions are adapted from those found in * the sectool library used by the nss security tools and * other nss test applications.
gtstd.html
the following sections decribe how to the certificate database tool to perform these tasks: setting up the ca db and certificate setting up the server db and certificate setting up the client db and certificate verifying the server and client certificates warning: the instructions below illustrate the use of nss command line tools to operate a simple root certificate authority for test purposes only.
...although it is possible to use nss command line tools to operate a proper ca, these instructions do not provide nearly enough understanding of the many considerations required to competently operate a ca.
... the nss teams strongly recommends that users should not attempt to operate a ca for use in mission critical production business uses using nss's command line tools, nor with the simple command line test tools that come with any package of cryptographic libraries.
Rhino JavaScript compiler
compiler command line java org.mozilla.javascript.tools.jsc.main [options] file1.js [file2.js...] where options are: -extends java-class-name specifies that a java class extending the java class java-class-name should be generated from the incoming javascript source file.
... examples $ cat test.js java.lang.system.out.println("hi, mom!"); $ java org.mozilla.javascript.tools.jsc.main test.js $ ls *.class test.class $ java test hi, mom!
... $ java org.mozilla.javascript.tools.jsc.main -extends java.applet.applet -implements java.lang.runnable nervoustext.js --norrisboyd 12:26, 13 june 2007 (pdt) ...
Scripting Java
these packages are likely not in the java package, so you'll need to prefix the package name with "packages." for example, to import the org.mozilla.javascript package you could use importpackage() as follows: $ java org.mozilla.javascript.tools.shell.main js> importpackage(packages.org.mozilla.javascript); js> context.currentcontext; org.mozilla.javascript.context@bb6ab6 occasionally, you will see examples that use the fully qualified name of the package instead of importing using the importpackage() method.
...using a fully qualified name, the above example would look as follows: $ java org.mozilla.javascript.tools.shell.main js> jspackage = packages.org.mozilla.javascript; [javapackage org.mozilla.javascript] js> jspackage.context.currentcontext; org.mozilla.javascript.context@bb6ab6 alternatively, if you want to import just one class from a package you can do so using the importclass() method.
... the above examples could be expressed as follows: $ java org.mozilla.javascript.tools.shell.main js> importclass(packages.org.mozilla.javascript.context); js> context.currentcontext; org.mozilla.javascript.context@bb6ab6 working with java now that we can access java classes, the next logical step is to create an object.
Rhino serialization
they're intended mainly as examples of the use of serialization: $ java org.mozilla.javascript.tools.shell.main js> function f() { return 3; } js> serialize(f, "f.ser") js> quit() $ java org.mozilla.javascript.tools.shell.main js> f = deserialize("f.ser") function f() { return 3;} js> f() 3 js> here we see a simple case of a function being serialized to a file and then read into a new instance of rhino and called.
...however, you can run into problems with serialization of compiled functions and scripts: $ cat test.jsfunction f() { return 3; } serialize(f, "f.ser"); g = deserialize("f.ser"); print(g()); $ java org.mozilla.javascript.tools.shell.main -opt -1test.js 3 $ java org.mozilla.javascript.tools.shell.main test.js js: uncaught javascript exception: java.lang.classnotfoundexception:c1 the problem is that java serialization has no built-in way to serialize java classes themselves.
... (it might be possible to save the java bytecodes in an array and then load the class upon deserialization, but at best that would eat up a lot of memory for just this feature.) one way around this is to compile the functions using the jsc tool: $ cat f.js function f() { return 3; } $ java -classpath js.jarorg.mozilla.javascript.tools.jsc.main f.js $ cat test2.js loadclass("f"); serialize(f, "f.ser"); g = deserialize("f.ser"); print(g()); $ java -classpath 'js.jar;.'org.mozilla.javascript.tools.shell.main test2.js 3 now the function f is compiled to a java class, but that class is then made available in the classpath so serialization works.
Zest usecase: Reporting Security Vulnerabilities to Developers
also security teams often use tools which the developers do not have access to or have no experience with.
...ideally security engineers will be able to use their favourite security tools to create zest scripts while developers will be able to rerun those scripts using the tools that they are familiar with.
... in this case the sequence of events could be: the security team discovers a vulnerability using specialist security tools they use those tools to create a zest script which reproduces the problem they hand the script over to the developer the developer adjusts the script to match their local environment they run the script and see the vulnerability they fix the vulnerability they rerun the script to check that the vulnerability is fixed the fix is applied to the system that the security team is testing the security team rerun the script as an initial check they then perform any manual testing they think is necessary note that the developers could also include the script in the regression tests to make sure that it doesnt reoccur.
AT APIs Support
(i recommend sdk 1.3 because the msaa sdk 2.0 doesn't come with the source code to the testing tools.
... test tools here you will find a list of tools to test accessibility gecko-based applications.
... msaa msaa sdk tools - version 1.3 is recommended instead of 2.0 because it includes source code for the tools iaccessible2 accessibility probe -- includes msaa support as well atk/at-spi accerciser - interactive python accessibility explorer for the gnome desktop gecko dom inspector has an ability to test gecko accessibility layer, supports base features.
Profiling XPCShell
xpctools there is profiler in the tree that can profile xpcshell scripts.
... to use it, you need to enable it in your mozconfig: ac_add_options --enable-xpctools now you can profile an entire script by setting the environment variable <tt>mozilla_js_profiler_output</tt> to a filename where you want the output file.
...using an earlier build will cause the profiler to hang the more adventurous can use the nsixpctoolsprofiler.idl interface directly, but be aware that you must start the profiler before loading the files you want to profile (creating an instance of a component loads the file!) ...
CanvasRenderingContext2D.addHitRegion() - Web APIs
parentid the id of the parent region for cursor fallback and navigation by accessibility tools.
... label a text label for accessibility tools to use as a description of the region, if there is no control.
... role an aria role for accessibility tools to determine how to represent this region, if there is no control.
Using the Frame Timing API - Web APIs
var threshold = 1500; var observe_frame = new performanceobserver(function(list) { var perfentries = list.getentriesbytype("frame"); for (var i=0; i < perfentries.length; i++) { if (perfentries[i].duration > threshold) { console.log("warning: frame '" + threshold + "' exceeded!"); } } }); observe_frame.observe({entrytypes: ['frame']}); the tools will save you!
... first, perhaps using the tools will save you is a bit too strong but performance tools can certainly help identify code that is not conformant to some expected time threshold.
... this section briefly describes the web performance tools for the firefox and chrome/canary browsers.
Using Service Workers - Web APIs
self.addeventlistener('activate', (event) => { var cachekeeplist = ['v2']; event.waituntil( caches.keys().then((keylist) => { return promise.all(keylist.map((key) => { if (cachekeeplist.indexof(key) === -1) { return caches.delete(key); } })); }) ); }); developer tools chrome has chrome://inspect/#service-workers, which shows current service worker activity and storage on a device, and chrome://serviceworker-internals, which shows more detail and allows you to start/stop/debug the worker process.
... firefox has also started to implement some useful tools related to service workers: you can navigate to about:debugging to see what sws are registered and update/remove them.
... when testing you can get around the https restriction by checking the "enable service workers over http (when toolbox is open)" option in the firefox developer tools settings.
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
without downloading the sdk, you won't get the extremely useful tools, which help a great deal in the learning process.
...the accessible explorer and inspect object tools show the tree of data nodes the accessible object is exposing through com, and what the screen boundaries of each object are.
... windowfromaccessibleobject depends on client-window relationship problem: unless certain rules are followed, windowfromaccessibleobject will break, causing the failure of accessibility testing tools like accexplore.exe, and assistive technologies which require knowledge of the window class to know what app-specific configurations to run.
Web Accessibility: Understanding Colors and Luminance - Accessibility
there are many online tools that can convert rgb to hsl for you, with both the rgb hexidecimal and css function syntax.
... calculations for relative luminance are not casual ones, luckily, there are tools that will do it for you.
....3: contrast (minimum) wcag working group's wiki page on relative luminance contributers many, many thanks to wayne dick of the low vision task force of the w3c and the intense discussions on luminance; to teal for his help and discussions on human perception of the color blue and how software companies create algorithms for image output based on it; and to tom jewett from knowbility; for the tools and educational resources he developed, that help us all.
Accessibility
this article starts off the module with a good look at what accessibility actually is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.
... mobile accessibility with web access on mobile devices being so popular, and popular platforms such as ios and android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms.
...understand the types of content that can be problematic, and find tools and strategies to help you avoid them.
Event reference
cssruleviewrefreshed devtools specific the "rules" view of the style inspector has been updated.
... cssruleviewchanged devtools specific the "rules" view of the style inspector has been changed.
... cssruleviewcsslinkclicked devtools specific a link to a css file has been clicked in the "rules" view of the style inspector.
Optimization and performance - Developer guides
there are several tools available to check the performance of a website or blog.
... the most notable tools are listed below.
... google pagespeed insights lighthouse webpagetest browser developer tools the above resources also include web performance best practices.
HTTP
WebHTTP
tools & resources helpful tools and resources for understanding and debugging http.
... firefox developer tools network monitor mozilla observatory a project designed to help developers, system administrators, and security professionals configure their sites safely and securely.
... redbot tools to check your cache-related headers how browsers work a very comprehensive article on browser internals and request flow through http protocol.
JavaScript modules - JavaScript
it ensures that your module files are parsed as a module by runtimes such as node.js, and build tools such as babel.
... it is also worth noting that: some tools may never support .mjs, such as typescript.
...you'll still get syntax errors shown in the devtools, but you'll not be able to use some of the debugging techniques you might have expected to use.
Web audio codec guide - Web media technologies
audio encoding software there are many tools available for encoding audio.
... a few popular options: ffmpeg arguably the best-known and most widely regarded open source codec packages available, ffmpeg supports the majority of the most popular audio formats and provides command-line tools and libraries for encoding, decoding, and performing format conversions of both audio and video.
...distributed only in source form by the lame project, but can be installed using homebrew or similar tools.
Understanding latency - Web Performance
network throttling to emulate the latency of a low bandwidth network, you can use developer tools and switch to a lower end network connection.
... in the developer tools, under the network table, you can switch the throttling option to 2g, 3g, etc.
... different browser developer tools have different preset options, the characteristics emulated include download speed, upload speed, and minimum latency, or the minimum amount of type it takes to send a packet of data.
Progressive web apps (PWAs)
tools localforage — a nice simple javascript library for making client-side data storage really simple; it uses indexeddb by default and falls back to web sql/web storage if necessary.
... tools for building progressive web apps with angular.
... progressive web apps: everything you need to know collection of resources, codelabs and tools you need to build pwas by the team at pwafire.org setting up your progressive web app development environment ...
Tutorials
you'll set up the tools you need to construct a simple webpage and publish your own simple code.
...we have covered the necessary prerequisites so can now dive deep into css layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox.
... starting to write css an introduction to tools and methodologies to write more succinct, maintainable, and scalable css.
Index - WebAssembly
6 converting webassembly text format to wasm webassembly, assembly, conversion, text format, wabt, wasm, wast2wasm, wat2wasm webassembly has an s-expression-based textual representation, an intermediate form designed to be exposed in text editors, browser developer tools, etc.
... this article explains a little bit about how it works, and how to use available tools to covert text format files to the .wasm assembly format.
... 11 using the webassembly javascript api api, devtools, javascript, webassembly, compile, instantiate, memory, table this article has taken you through the basics of using the webassembly javascript api to include a webassembly module in a javascript context and make use of its functions, and how to use webassembly memory and tables in javascript.
Using the WebAssembly JavaScript API - WebAssembly
if you have already compiled a module from another language using tools like emscripten, or loaded and run the code yourself, the next step is to learn more about using the other features of the webassembly javascript api.
... the equivalent code would look like this: fetch('simple.wasm').then(response => response.arraybuffer() ).then(bytes => webassembly.instantiate(bytes, importobject) ).then(results => { results.instance.exports.exported_func(); }); viewing wasm in developer tools in firefox 54+, the developer tool debugger panel has functionality to expose the text representation of any wasm code included in a web page.
...see webassembly debugging with firefox devtools for a video preview.
l10n - Archive of obsolete content
the gettext tools uses "_" for the name of the function that retrieves localized strings.
... for compatibility with tools that expect this syntax, you can assign this function to "_": var _ = require("sdk/l10n").get; given a .properties file for the current locale containing an entry like: hello_string= hello!
Localization - Archive of obsolete content
ria-label, aria-valuetext and aria-moz-hint are supported with the same aliases as on firefox os: arialabel ariavaluetext ariamozhint using localized strings in javascript to reference localized strings from your main add-on code, you do this: var _ = require("sdk/l10n").get; console.log(_("hello_id")); assigning to "_" in particular is not required, but is a convention from the gettext tools and will make it possible to work with existing tools that expect "_" to indicate localizable strings.
... the sdk tools compile the locale files into a json format when producing an xpi.
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
all the tools for building are available built-in, and therefore all you have to do is run some commands in the terminal.
...(if something goes wrong, figure out what, fix it and then come back here and add it to this article.) to make sure that the build really finished, launch firefox and check that your extension is listed when you select tools/extensions.
Adding menus and submenus - Archive of obsolete content
adding elements to existing menus just as explained in the previous sections, the best place to overlay your extension menu is inside the tools menu.
...if you're overlaying the tools menu, your overlay code should have something like this: <menupopup id="menu_toolspopup"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertafter="javascriptconsole,devtoolsseparator"> <menupopup> <!-- your menuitem goes here.
Appendix D: Loading Scripts - Archive of obsolete content
debuggable: development tools support debugging javascript loaded by script tags disadvantages scoping: scripts loaded via script tags share the global scope with all other scripts loaded into the same window.
...some known issues include: e4x xml objects cannot be wrapped for passage between compartments: bug 613142 there are a number of type detection issues, including: string.replace does not recognize regexp objects from foreign compartments: bug 633830 debugging: support for sandbox evaluation in development tools is uneven.
Connecting to Remote Content - Archive of obsolete content
there are a couple of tools you can use to process these documents more efficiently: using xpath xpath stands for xml path language, it uses a non-xml syntax that provides a flexible way of addressing (pointing to) different parts of an xml document.
... after installation, you can find a tamper data menu item in the menu bar: tools > tamper data or view > sidebar > tamper data once you open the tamper data view, all requests and responses will begin to appear in it.
Mozilla Documentation Roadmap - Archive of obsolete content
it includes links to tutorials and documentation, development tools, and most notably, the mozilla add-ons forum.
... mozilla blogs several mozilla community members maintain blogs that are updated frequently, often including information on api changes, bug fixes, useful tools and future release plans.
Useful Mozilla Community Sites - Archive of obsolete content
mozdev mozdev.org provides free project hosting and software development tools for mozilla applications and add-ons.
... it offers many necessary services such as bug tracking, source code repositories, download mirrors and many communication tools.
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
how as it been compiled?) about:buildconfig build platform target i686-pc-linux-gnu build tools compiler version compiler flags gcc gcc version 3.4.3 20050227 (red hat 3.4.3-22.fc3) -wall -w -wno-unused -wpointer-arith -wcast-align -wno-long-long -pedantic -pthread -pipe c++ gcc version 3.4.3 20050227 (red hat 3.4.3-22.fc3) -fno-rtti -fno-exceptions -wall -wconversion -wpointer-arith -wcast-align -woverloaded-virtual -wsynth -wno-ctor-dtor-privacy -wno-non-virtual-dtor -wno-long-long -pedan...
... build install mercurial tools [root@b008-02 ~]# yum install mercurial installed: mercurial.i586 0:1.2.1-1.fc11 check merge tools in [root@b008-02 ~]# vim /etc/mercurial/hgrc.d/mergetools.rc get the source comm-central [root@b008-02 moz]# time hg clone http://hg.mozilla.org/comm-central/ commsrc requesting all changes adding changesets adding manifests adding file changes added 2975 changesets with 16793 changes to 7...
DTrace - Archive of obsolete content
dtrace has been largely supplanted by the gecko profiler and other tools, so this documentation has been archived.
... community dtrace forums #dtrace on irc.freenode.org sun's dtrace howto guide tools nightly trunk builds for solaris dtracetoolkit related topics javascript ...
Error Console - Archive of obsolete content
the error console is deprecated in firefox, and is now only made available if you set the devtools.errorconsole.enabled preference to true.
...in firefox, the error console can be opened from the tools menu or by ctrl-shift-j.
JavaScript OS.Shared - Archive of obsolete content
module os.shared contains tools to interact with the operating system (and, more generally, in c) in javascript.
... all these tools are designed to be used with js-ctypes.
Mozilla Application Framework - Archive of obsolete content
we provide a comprehensive framework that does much of the work for you, tools to help you develop your apps, and a community of people to help.
... tools venkman a javascript debugger with support for breakpoints, conditional breakpoints, local variable inspection, watch variables, single step, stop on error, profile data collection, report generation, code reformatting (pretty printing), and more.
Plug-n-Hack Get Involved - Archive of obsolete content
while this project has been started by the mozilla security team and has been validated with firefox and owasp zap, this is an open project and we welcome involvement from anyone, especially people working on other browsers and security tools.
...you can also talk to the mozilla security team about this project on the #websectools irc channel.
Plug-n-Hack Phase2 - Archive of obsolete content
the next phase of plug-n-hack (pnh) is still being planned but is intended to allow browsers to advertise their capabilities to security tools.
... this will allow the tools to obtain information directly from the browser, and even use the browser as an extension of the tool.
Using cross commit - Archive of obsolete content
if you don't, however, then from the parent directory of your source dir, do: cvs co mozilla/tools/cross-commit note that you will need to have $cvsroot and such set up correctly for this to work.
... using the script quick overview there are a couple of common ways to use cross-commit: land something simultaneously on the trunk and mozilla_1_8_branch # modify the files (probably by applying the patch) patch -p0 < ~/caret.patch # commit on trunk and branch at once # make sure to use -m "commit message" when doing so tools/cross-commit -m "fix some sort of security bug" layout/base/nscaret.h land something on two other branches that has already landed on the trunk # update to the first branch you want to land on cvs update -rmozilla_1_8_branch layout/base/nscaret.h # modify the files (probably by applying the patch) patch -p0 < ~/caret.patch # commit on all the branches at once # make sure to use -m "commit message" when doing so tools/cross-commit --moz18 --branch moz...
Menus - Archive of obsolete content
menu_toolspopup the menupopup associated with the 'tools' menu.
... menuwebdeveloperpopup the menupopup for the 'web developer' submenu on the 'tools' menu.
Popup Guide - Archive of obsolete content
usually it would contain tools related to the main window, or an inspector which displays properties of a selected element.
...for example, an extension might wish to add a new command on the tools menu to open a dialog specific to the extension.
The Joy of XUL - Archive of obsolete content
before the web became the standard for delivering applications to users across disparate desktops, this problem was solved with cross-platform client-server tools.
...mozilla delivers much of the same value as these cross platform tools, but with an open source license.
Toolbars - Archive of obsolete content
tools dom inspector edit the live dom (firefox and thunderbird) mozilla labs add-on builder extension developer's extension a suite of development tools chrome list view files in chrome:// (firefox, thunderbird) extension wizard a web-based extension skeleton generator (firefox and thunderbird) ...
... more tools ...
Skinning XUL Files by Hand - Archive of obsolete content
thinking skins sometimes you can become so involved in the details of xul and mozilla's other xp tools that you can lose sight of what the purpose and impact of these technologies are.
... in short, xul provides the tools for anybody to create interfaces as complex and as attractive as any c++/mfc/visual ide/templates toolkit user's, and it does so in a way that makes these interfaces available on any platform.
XML - Archive of obsolete content
using a combination of xul's ready-made widgets (e.g., menubar, scrollbar, progressmeter, and so on) and xul's incorporation of such standards as html4, dom1/2, and cascading stylesheets, you can design any interface that you can imagine, using any number of different features, tools, and methodologies.
...they are a toolkit whose tools are as simple as html tags but as powerful as visual gui builder tools.
XULRunner FAQ - Archive of obsolete content
xulrunner can be used to make development tools (the ajax toolkit framework, for example).
... in the future there will be a xulrunner developer kit which will contain various development tools.
Plugins - Archive of obsolete content
there are also some code generation tools that may be helpful.
... more information about these tools can be found on the external resources page.
Solaris 10 Build Prerequisites - Archive of obsolete content
provides build tools needed by some open-source projects (eg gnome).
... the tools included with solaris and sun studio should be sufficient for building mozilla, so you can skip this.
Building a Theme - Archive of obsolete content
open up the dom inspector now (located under the "tools" menu), and go to "file->inspect chrome document".
...for the purposes of just testing our .xpi file we can just drag it into the add-ons manager via "tools -> add-ons manager", or open it using "file -> open file...".
XUL Booster - Archive of obsolete content
xul booster is a third party eclipse / webtools build that offers some support for xul editing and awesome support for extension packaging.
...menupopup id="menu_toolspopup".
Archive of obsolete content
element events archived event pages firefox developer tools these are articles related to the firefox developer tools, which are no longer current.
... xul booster xul booster is a third party eclipse / webtools build that offers some support for xul editing and awesome support for extension packaging.
Anatomy of a video game - Game development
it helps beginners to the modern game development arena understand what is required when building a game and how web standards like javascript lend themselves as tools.
...simple animations can be easily performed, even gpu-accelerated, with css animations and other tools included in the browser.
Building up a basic demo with PlayCanvas - Game development
engine vs editor the engine itself can be used as a standard library by including its javascript file directly in your html, so you can start coding right away; in addition the playcanvas toolset comes with an online editor that you can use to drag and drop components onto the scene — a great way to create games and other apps requiring scenes if you're more of a designer than a coder.
...the good thing is that you have a choice and can pick whatever tools suit you best.
WebVR — Virtual Reality for the Web - Game development
tools and techniques the first webvr experiments and demos used three.js as it's probably the most popular 3d engine for the web.
...all we need now is a stable specification, good ux and ui, better hardware and more tools and libraries — and all of that is on the horizon.
2D maze game with device orientation - Game development
the phaser framework provides you with a set of tools that will speed up development and help handle generic tasks needed to complete the game, so you can focus on the game idea itself.
... html5 gives us raw tools, the frameworks built on top of it are getting faster and better, so now is a great time get into web game development.
Visual JS GE - Game development
p and project instance, as indicated below: module.exports = { version : "0.5", path_of_node_app : "d:/path_to_server_instance_folder/server/" , // edit here path_of_www : "d:/xamp/htdocs/project_instance/", // path_to_www edit here editor_port : "1013", reg_path : "users/", account_port : 3666 , destroy_session_after_x_mseconds : 20000, }; local node.js application tools (uses in developer mode only) the following section provides information about the tools involved in visual-js game engine.
...contains the following tools.
Synthetic monitoring - MDN Web Docs Glossary: Definitions of Web-related terms
examples of popular synthetic monitoring tools include webpagetest and lighthouse.
...combined with other tools, such as network throttling, can provide excellent insight into potential problem areas.
Accessibility - Learn web development
this article starts off the module with a good look at what accessibility is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.
... mobile accessibility with web access on mobile devices being so popular, and popular platforms such as ios and android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms.
Advanced styling effects - Learn web development
note: in firefox you can use the devtools shapes inspector to inspect shapes.
... summary we hope this article was fun — playing with shiny toys generally is, and it is always interesting to see what kinds of advanced styling tools are becoming available in modern browsers.
The box model - Learn web development
use browser devtools to view the box model your browser developer tools can make understanding the box model far easier.
... if you inspect an element in firefox's devtools, you can see the size of the element plus its margin, padding, and border.
Flexbox - Learn web development
for a long time, the only reliable cross browser-compatible tools available for creating css layouts were things like floats and positioning.
... the following simple layout requirements are either difficult or impossible to achieve with such tools, in any kind of convenient, flexible way: vertically centering a block of content inside its parent.
Beginner's guide to media queries - Learn web development
the responsive design mode in firefox devtools is very useful for working out where these breakpoints should go.
...if we view the layout in responsive design mode in devtools we can see that it works pretty well as a straightforward mobile view of the site.
Responsive design - Learn web development
note: the screenshots above are taken using the responsive design mode in firefox devtools.
...if you are new to web development today you have many more tools at your disposal than in the early days of responsive design.
How CSS works - Learn web development
when you start working with browser devtools you will be navigating the dom as you select items in order to see which rules apply.
... the updated output is as follows: in our debugging css article in the next module we will be using browser devtools to debug css problems, and will learn more about how the browser interprets css.
Styling lists - Learn web development
</dt> <dd>a soft, slightly leavened flatbread.</dd> <dt>halloumi</dt> <dd>a semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd> <dt>green salad</dt> <dd>that green healthy stuff that many of us just use to garnish kebabs.</dd> </dl> if you go to the live example now and investigate the list elements using browser developer tools, you'll notice a couple of styling defaults: the <ul> and <ol> elements have a top and bottom margin of 16px (1em) and a padding-left of 40px (2.5em.) the list items (<li> elements) have no set defaults for spacing.
...html and css have some tools to help you here.
Learn to style HTML using CSS - Learn web development
we have covered the necessary prerequisites so we can now dive deep into css layout, looking at different display settings, modern layout tools like flexbox, css grid, and positioning, and some of the legacy techniques you might still want to know about.
... "css is weird" css works a bit differently to most programming languages and design tools you'll come across.
How do you make sure your website works properly? - Learn web development
open firefox's network tool (tools ➤ web developer ➤ network) and reload the page: there's the problem, that "404" at the bottom.
... open the console (tools ➤ web developer ➤ web console) and reload the page: in this example, we learn (quite clearly) what the error is, and we can go fix it (we will cover javascript in another series of articles).
How much does it cost to do something on the Web? - Learn web development
if at some point you need to exchange projects with other designers, you should find out what tools they're using.
... publishing tools you also need a way to upload files: from your hard drive to a distant web server.
How do I start to design my website? - Learn web development
therefore, before jumping into the technical side—for example, code and tools—you must first step back and decide in detail what you want to do.
...since our goal is what matters most, we should spend our energy on leveraging existing tools rather than starting from scratch.
Front-end web developer - Learn web development
modules cross-browser testing (25–30 hour read/exercises) accessibility (20–25 hour read/exercises) modern tooling time to complete: 55–90 hours prerequisites it is a good idea to know html, css, and javascript before working through this section, as the tools discussed work alongside many of these technologies.
... modules git and github (5 hour read) understanding client-side web development tools (20–25 hour read) understanding client-side javascript frameworks (30-60 hour read/exercises) ...
Publishing your website - Learn web development
using an online tool like github or google app engine some tools let you publish your website online: github is a "social coding" site.
...generally speaking, these tools are relatively easy, great for learning, good for sharing code (for example, if you want to share a technique with or ask for debugging help from colleagues in a different office), and free (for basic features).
Creating hyperlinks - Learn web development
for example, the bbc homepage contains a many links that point not only to multiple news stories, but also different areas of the site (navigation functionality), login/registration pages (user tools), and more.
...we need to make our links accessible to all readers, regardless of their current context and which tools they prefer.
What’s in the head? Metadata in HTML - Learn web development
try going to some of your favorite websites and use the developer tools to check out their head contents.
... note: in google, you will see some relevant subpages of mdn web docs listed below the main homepage link — these are called sitelinks, and are configurable in google's webmaster tools — a way to make your site's search results better in the google search engine.
Adding vector graphics to the Web - Learn web development
these packages allow you to create a variety of illustrations using various graphics tools, and create approximations of photos (for example inkscape's trace bitmap feature.) svg has some additional advantages besides those described so far: text in vector images remains accessible (which also benefits your seo).
... in the last article of this module we will explore responsive images in detail, looking at the tools html has to allow you to make your images work better across different devices.
From object to iframe — other embedding technologies - Learn web development
a quick example first though — try loading the previous example we showed above into your browser — you can find it live on github (see the source code too.) you won't actually see anything displayed on the page, and if you look at the console in the browser developer tools, you'll see a message telling you why.
... the <embed> and <object> elements the <embed> and <object> elements serve a different function to <iframe> — these elements are general purpose embedding tools for embedding multiple types of external content, which include plugin technologies like java applets and flash, pdf (which can be shown in a browser with a pdf plugin), and even content like videos, svg and images!
Client-side storage - Learn web development
open the javascript console of your browser's developer tools.
... go to the devtools, then choose application > service workers, then check the offline checkbox if you are using chrome.
Basic math in JavaScript — numbers and operators - Learn web development
enter the commands listed below into your developer tools javascript console.
...try entering the examples below into your developer tools javascript console to familiarize yourself with the syntax.
Storing the information you need — Variables - Learn web development
tools you need throughout this article, you'll be asked to type in lines of code to test your understanding of the content.
... if you are using a desktop browser, the best place to type your sample code is your browser's javascript console (see what are browser developer tools for more information on how to access this tool).
Test your skills: Object basics - Learn web development
run the greeting() method using dot notation (it will log the greeting to the browser devtools' console).
...we want you to rewrite the greeting() method so that it logs "hello, said bertie the cymric." to the browser devtools' console, but in a way that will work across any cat object of the same structure, regardless of its name or breed.
Web performance resources - Learn web development
below is a quick review of best practices, tools, apis with links to provide more information about each topic.
... tools learn to use the firefox dev tools to profile your site.
What is web performance? - Learn web development
this article provides a brief introduction to objective, measureable web performance*, looking at what technologies, techniques, and tools are involved in web optimization.
...this involves a number of metrics (measurable indicators that can indicate success or failure) and tools to meaure those metrics, which we will discuss throughout this module.
Web performance - Learn web development
it would also be helpful to go a bit deeper into these topics, with modules such as: introduction to html css first steps javascript first steps once you've worked through this module, you'll probably be excited to go deeper into web performance — you can find a lot of further teachings in our main mdn web performance section, including overviews of performance apis, testing and analysis tools, and performance bottleneck gotchas.
... measuring performance now that you understand a few performance metrics, we take a deeper dive into performance tools, metrics, and apis and how we can make performance part of the web development workflow.
Learning area release notes - Learn web development
april 2020 our new understanding client-side web development tools module has been released!
... learn the essentials of web development tooling, including what kind of tools exist, the command line, package managers, and how to assemble your own functioning tool chain.
Client-Server Overview - Learn web development
use any of the linked tools, and then navigate through a site and edit profile information to see the different requests and responses.
... most modern browsers also have tools that monitor network requests (for example, the network monitor tool in firefox).
Introduction to the server side - Learn web development
in contrast, you would almost never consider writing the server-side component of a web app without a framework — implementing a vital feature like an http server is really hard to do from scratch in say python, but python web frameworks like django provide one out of the box, along with other very useful tools.
... the server is not limited to sending information from databases, and might alternatively return the result of software tools, or data from communications services.
Website security - Learn web development
finally, there are publically available vulnerability scanner tools that can help you find out if you've made any obvious mistakes.
... use vulnerability scanning tools to perform automated security testing on your site.
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
update your existing checkalltodos() function to the following: const checkalltodos = (completed) => { todos.foreach(t => t.completed = completed) console.log('todos', todos) } go back to your browser, open your devtools console, and click check all/uncheck all a few times.
... let name = '' let nameel // reference to the name input dom node if (autofocus) nameel.focus() now go back to the todos component, and pass the autofocus prop into the <newtodo> component call, like so: <!-- newtodo --> <newtodo autofocus on:addtodo={e => addtodo(e.detail)} /> if you try your app out now, you'll see that the page is now blank, and in your devtools web console you'll see an error along the lines of: typeerror: nameel is undefined.
Creating our first Vue component - Learn web development
go to your browser's devtools and you’ll see a warning along these lines in the console: [vue warn]: missing required prop: "label" found in ---> <todoitem> at src/components/todoitem.vue <app> at src/app.vue <root> this is because we marked the label as a required prop, but we never gave the component that prop — we've defined where inside the template we want it used, but we haven't passed it into t...
...you can check if the unique ids are working by temporarily adding more <to-do-item></to-do-item> calls into app.vue, and then checking their rendered output with your browser's devtools.
Understanding client-side JavaScript frameworks - Learn web development
javascript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications.
...we will see how svelte works and what sets it apart from the rest of the frameworks and tools we've seen so far.
Learn web development
frameworks and tooling: after mastering the essentials of vanilla html, css, and javascript, you should learn about client-side web development tools, and then consider digging into client-side javascript frameworks, and server-side website programming.
... tools and testing this topic covers the tools developers use to facilitate their work, such as cross-browser testing tools, linters, formatters, transformation tools, version control systems, deployment tools, and client-side javascript frameworks.
Accessibility Features in Firefox
extensions can easily be installed or removed with the extension manager in the tools menu.
...developers, please see our dhtml accessibility documentation and get involved in writing tools and websites using this new technology.
Gecko info for Windows accessibility vendors
(i recommend sdk 1.3 because the msaa sdk 2.0 doesn't come with the source code to the testing tools.
... msaa support: iaccessible methods to use msaa with gecko, you'll need the tools and docs that come with the active accessibility 2.0 sdk tools.
Mozilla’s UAAG evaluation report
(p2) p can view event handlers through source view or dom inspector (tasks, tools, dom inspector) 9.7 move content focus optimally.
...(p2) p dom inspector provides some capability, but not really intended for end users (tasks, tools, dom inspector) 9.10 configure important elements.
Command line options
-devtools start with native developer tools opened.
...this will enable another instance of firefox to connect the firefox developer tools to this firefox instance.
Debugging
also available are assorted tools that you can use when debugging.
... debugging tools tools assorted tools that will help you debug your code or web site.
Configuring Build Options
this is useful when working locally on javascript-powered components like the devtools.
... ac_add_options --enable-crashreporter this enables the machinery that allows firefox to write out a minidump files when crashing as well as the tools to process and submit crash reports to mozilla.
ESLint
prior to firefox 55 the location for the eslint binary used to be tools/lint/eslint/node_modules/.bin, since bug 1305023, node_modules is now located in the top-level directory, and should need no special set-up.
... foo.jsm exports a symbol, but that is not recognised by eslint check it is listed correctly in tools/lint/eslint/modules.json using services.scriptloader.loadsubscript?
Developer guide
there are lots of ways to contribute to the mozilla project: coding, testing, improving the build process and tools, or contributing to the documentation.
... tools bugzilla the bugzilla database used to track issues for mozilla projects.
Multiple Firefox profiles
third-party tools in addition to the built-in profile manager and the external profile manager, there are a few third-party tools that make working with multiple profiles easy.
...please add any helpful tools you discover to the list!
Storage access policy: Block cookies from trackers
developer tools notifications the network monitor in firefox developer tools now includes an indicator for all resource requests that have been classified as tracking resources.
... i use third-party pixels and other tools to measure the effectiveness of my ad campaigns.
How to add a build-time test
we have various automation tools that help make this possible.
... for example, to add an xpcshell test to a module, do the following: copy tools/test-harness/xpcshell-simple/example to yourmoduledir/tests_type, wheretests_type is something that describes your tests.
Examples
lert('mypromise failed for reason = "' + uneval(arejectreason) + '"'); } ); function myuserdefinedpromise() { return 'i didnt do a promise.resolve so this will not understand that mypromise is a promise'; } // creates this error: /* exception: mypromise.then is not a function @scratchpad/5:8:1 wca_evalwithdebugger@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/webconsole.js:1069:7 wca_onevaluatejs@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/webconsole.js:734:9 dsc_onpacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js:1098:9 ldt_send/<@resource://gre/modules/devtools/dbg-client.jsm -> resource://gre/modules/devtools/server/transpor...
...t.js:279:11 makeinfallible/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/devtoolsutils.js:84:7 */ intermediate of user defined promise function 1 components.utils.import("resource://gre/modules/promise.jsm"); // this function creates and returns a new promise.
JavaScript code modules
perfmeasurement.jsm provides access to low-level hardware and os performance measurement tools.
... source-editor.jsm the source editor is used by developer tools such as, the style editor; this interface implements the editor and lets you interact with it.
Localizing XLIFF files for iOS
the goal of the standard is to have an xml-based format to use when exchanging localization data between tools without the potential of data loss or corruption.
... most translation tools support the xliff standard, making localizing the xliff files for firefox for ios easy to do using translation tools.
Localizing with Koala
go to tools > add-ons.
... re-running the comparison a common scheme of working with the compare-locales tools (included in koala) is to incrementally translate and commit the files and then re-run comparison to see what is left to be translated.
Localizing with Mozilla Translator
like most cat tools, mozillatranslator employs glossaries and translation memory to leverage your work from previous translations, thus cutting time and effort when localizing new versions of mozilla applications.
... finally, you commit your changes outside of mt, using your favorite repository tools.
SVN for Localizers
first things first, we need to give you a brief introduction to what svn is and where you can find the necessary tools to get started.
... mac os x users can find svn inside the command line tools (available on the apple developer website), or use tools like homebrew or fink.
Activity Monitor, Battery Status Menu and top
this article describes the activity monitor, battery status menu, and top — three related tools available on mac os x.
... activity monitor can be useful for cursory measurements, but for more precise and detailed measurements other tools such as powermetrics are better.
Gecko Profiler FAQ
you can write your own tools to assist you in this process, though.
...(see many of the questions above for examples of such limitations.) note that these tools should all be considered as complementary, it’s typical to capture a profile in gecko profiler and based on some investigations decide to delve into some part of it using a native profiler, etc.
Intel Power Gadget
the main strengths of this tool are (a) it works on windows, unlike most other power-related tools, and (b) it shows this data in graph form, which is occasionally useful.
... on mac and linux, tools/power/rapl is probably a better tool to use.
NSS FAQ
MozillaProjectsNSSFAQ
where can i download the nss tools?
... binary builds of nss for several platforms including the command-line tools can be downloaded from http://ftp.mozilla.org/pub/mozilla.o...y/nss/releases/.
Getting Started With NSS
the nss library and its supporting command line tools are written in the c programming language.
...you could contribute by organizing it in a better way.) nss sample code a good place to start learning how to write nss applications are the command line tools that are maintained by the nss developers.
NSS Memory allocation
leak analysis tools will frequently report the wrong call stack for the allocation of leaked arenas.
...but leak analysis tools only record the allocation of memory from the heap, not memory from the arena free list, so they will always show the first allocation (from the heap) and not the most recent allocation (from the arena free list).
NSS_3.12.2_release_notes.html
the tar.gz or zip file expands to an nss-3.12.2 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin< - nss tools and test programs you also need to download the nspr 4.7.1 binary distributions to get the nspr 4.7.1 header files and shared libraries, which nss 3.12.2 requires.
...rmsg variable in pkix_error bug 391560: libpkix does not consistently return pkix_validatenode tree that truly represent failure reasons bug 408260: certutil usage doesn't give enough information about trust arguments bug 412311: replace pr_interval_no_wait with pr_interval_no_timeout in client initialization calls bug 423839: add multiple pkcs#11 token password command line option to nss tools.
NSS 3.50 release notes
bugs fixed in nss 3.50 bug 1599514 - update dtls 1.3 implementation to draft-30 bug 1603438 - fix native tools build failure due to lack of zlib include dir if external bug 1599603 - nist sp800-108 kbkdf - pkcs#11 implementation bug 1606992 - cache the most recent pbkdf1 password hash, to speed up repeated sdr operations, important with the increased kdf iteration counts.
... nss 3.49.1 sped up pbkdf2 operations, though pbkdf1 operations are also relevant for older nss databases (also included in nss 3.49.2) bug 1608895 - gyp builds on taskcluster broken by setuptools v45.0.0 (for lacking python3) bug 1574643 - upgrade hacl* verified implementations of chacha20, poly1305, and 64-bit curve25519 bug 1608327 - two problems with neon-specific code in freebl bug 1575843 - detect aarch64 cpu features on freebsd bug 1607099 - remove the buildbot configuration bug 1585429 - add more hkdf test vectors bug 1573911 - add more rsa test vectors bug 1605314 - compare all 8 bytes of an mp_digit when clamping in windows assembly/mp_comba bug 1604596 - update wycheproof vectors and add support for cbc, p256-ecdh, and cmac tests bug 1608493 - use aes-ni for non-gcm aes cip...
Overview of NSS
complete software development kit in addition to libraries and apis, nss provides security tools required for debugging, diagnostics, certificate and key management, cryptography module management, and other development tasks.
... nss comes with an extensive and growing set of documentation, including introductory material, api references, man pages for command-line tools, and sample code.
NSS functions
nss_cmsutil_verificationstatustostring mxr 3.2 and later nss_smimesignerinfo_savesmimeprofile mxr 3.4 and later nss_smimeutil_findbulkalgforrecipients mxr 3.2 and later pkcs #7 functions the public functions listed here perform pkcs #7 operations required by mail and news applications and by some of the nss tools.
... sec_pkcs7setcontent mxr 3.4 and later sec_pkcs7verifydetachedsignature mxr 3.4 and later sec_pkcs7verifysignature mxr 3.2 and later secmime_decryptionallowed mxr 3.4 and later pkcs #12 functions the public functions listed here perform pkcs #12 operations required by some of the nss tools and other applications.
troubleshoot.html
building jss windows only: the shell invoked by gmake, shmsdos.exe, is likely to crash when invoking some java tools on windows.
... cd c:/programs/cygnus/bin (or wherever your gnu tools are installed) cp shmsdos.exe shmsdos.bak (backup shmsdos) cp sh.exe shmsdos.exe (substitute alternative shell) making this change will probably break other builds you are making on the same machine.
NSS reference
nss environment variables nss cryptographic module nss tech notes nss tech notes nss memory allocation tools based on nss tools documentation.
... based on nss tools man pages : work in progress ...
Network Security Services
tools, testing, and other technical details build instructions for nss describe how to check out and build nss releases.
... nss tools tools for developing, debugging, and managing applications that use nss.
Pork Tool Development
files and locations most tools are in the "oink" directory.
... notes the #static channel on irc.mozilla.org is for discussion of pork, dehydra, and other static analysis tools.
Small Footprint
tools most embeddings won't need any of the classes in org.mozilla.javascript.tools or any of its sub-packages.
... smalljs.jar ant build script in rhino supports smalljar target that will generate smalljs.jar that does not include tools, optimizer, javaadapter and class generation library, regular expressions, e4x implementataion and deprecated files.
Rhino shell
invoking the shell java org.mozilla.javascript.tools.shell.main [options] script-filename-or-url [script-arguments] where options are: -e script-source executes script-source as a javascript script.
... $ java org.mozilla.javascript.tools.shell.main -e "print('hi')" hi $ java org.mozilla.javascript.tools.shell.main js> print('hi') hi js> 6*7 42 js> function f() { return a; } js> var a = 34; js> f() 34 js> quit() $ cat echo.js for (i in arguments) { print(arguments[i]) } $ java org.mozilla.javascript.tools.shell.main echo.js foo bar foo bar $ spawn and sync the following example creates 2 threads via spawn and uses sync to c...
Index
7 gcintegration developing mozilla, firefox, garbage collection, intermediate, intro, jsapi, needsupdate, spidermonkey, tools, memory the spidermonkey garbage collector (gc) will be changing a lot in the future.
... 523 setting up cdt to work on spidermonkey developing mozilla, eclipse, ide, spidermonkey, tools for cdt to index all code, spidermonkey has to be built with debug information.
Exploitable crashes
additionally, mozilla developers make heavy use of two tools in particular to find exploitable situations before they show up as exploitable crash reports.
... other tools apple has a tool called "crashwrangler" that are still being maintained as of 2012.
Secure Development Guidelines
in(int argc, char *argv[]) { if (argc > 1) printf("%s", argv[1]); } double free example: void* ptr = malloc(1024); if (error) { free(ptr); } free(ptr); double free: prevention set a pointer to null when it’s freed valgrind or malloc debugging can help detect those bugs use after free accessing data after a free() or delete can lead to undefined behavior some debug tools might be able catch some cases un-initialized data example: int main() { char *uninitialized_ptr; printf("0x%08x\r\n", uninitialized_ptr); return 0; } $ ./test 0x8fe0103 un-initialized data: prevention initialize your variables!
... memory leaks example: void *p; size_t new_size; p = realloc(p, new_size); if (p == null) { /* handle error */ } memory leaks: prevention tools like valgrind can help detect memory leaks writing secure code: object management reference counting issues real-life example (bug 440230) void addref() { ++mrefcnt; ns_log_addref(this, mrefcnt, "nscssvalue::array", sizeof(*this)); } void release() { --mrefcnt; ns_log_release(this, mrefcnt, "nscssvalue::array"); if (mrefcnt == 0) delete this; } reference counting issues: prevention use the largest data type available on your platform for your reference counter use a hard limit constructor/destructor issues if a constructor fails the destructor never gets called this can lead to ...
Component Internals
however, there are some unfrozen tools in xpcom that are used so often they are practically required parts of component programming.
... xpcom glue and tools this is the glue library.
Creating the Component Code
as in grade school when you learned long division, better tools like calculators come after you figure out what's actually happening.
... const nsiid & iid, void * *result) { if (!result) return ns_error_invalid_arg; sample* sample = new sample(); if (!sample) return ns_error_out_of_memory; nsresult rv = sample->queryinterface(iid, result); if (ns_failed(rv)) { *result = nsnull; delete sample; } return rv; } weblock1.cpp before any of the improvements and xpcom tools we describe in the following chapter are brought in, the source code for the weblock component that implements all the necessary interfaces looks like this.
Preface
though the emphasis is on the practical steps you take to make your c++ code into a component that can be used in gecko, we hope that these steps will also give us an occasion to discuss all of the tools, techniques, and technologies that make up xpcom.
...if you don't already have the mozilla source, then an even easier way to get and use xpcom is to download the gecko sdk, which is a collection of libraries and tools that features the xpcom component framework.
Index
to access the config editor, go to tools > options or do thunderbird > preferences.
... 85 error reporting tools thunderbird currently, thunderbird tends to eat a lot of exceptions.
Thunderbird Configuration Files
to access the config editor, go to tools > options or do thunderbird > preferences.
...start explorer (just click on the my computer icon on your desktop) and select tools > folder options.
CSSKeywordValue.CSSKeywordValue() - Web APIs
examples the following example resets the css display property to its defaults, setting the inline style attribute to style="display: initial" if viewed in the developer tools inspector.
... #myelement { display: flex; } <div id="myelement">check the developer tools to see the log in the console and to inspect the style attribute on this div.</div> let keyword = new csskeywordvalue('initial'); let myelement = document.getelementbyid('myelement').attributestylemap; myelement.set('display', keyword); console.log( myelement.get('display').value); // 'initial' console.dir( keyword ); specifications specification status comment css typed om level 1the definition of 'csskeywordvalue' in that specification.
CSSKeywordValue - Web APIs
examples the following example resets the css display property to its defaults, setting the inline style attribute to style="display: initial" if viewed in the developer tools inspector.
... #myelement { display: flex; } <div id="myelement">check the developer tools to see the log in the console and to inspect the style attribute on this div.</div> let myelement = document.getelementbyid('myelement').attributestylemap; myelement.set('display', new csskeywordvalue('initial')); console.log( myelement.get('display').value); // 'initial' specifications specification status comment css typed om level 1the definition of 'csskeywordvalue' in that specification.
Hit regions and accessibility - Web APIs
canvas content is not exposed to accessibility tools like semantic html is.
...the hit region api allows you to define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
note: firefox devtools have supported highlighting text nodes since version 52, making it easier to see exactly what nodes whitespace characters are contained within.
... the firefox devtools html inspector will highlight text nodes, and also show you exactly what area the elements are taking up — useful if you are wondering what is causing the problem, and are maybe thinking you've got some extra margin in there or something!
Using the Permissions API - Web APIs
the permissions api provides the tools to allow developers to implement a better user experience as far as permissions are concerned.
...if we choose to never share our location from the permission prompt (deny permission), then we can't get back to the permission prompt without using the browser menu options: firefox: tools > page info > permissions > access your location.
Web Audio API - Web APIs
tools for analyzing web audio usagewhile working on your web audio api code, you may find that you need tools to analyze the graph of nodes you create or to otherwise debug your work.
... this article discusses tools available to help you do that.using iir filtersthat's it for our iirfilter demo.
Cognitive accessibility - Accessibility
there are tools that can rate the level of your content.
...some tools can even provide suggestions to help simplify it.
Basic Concepts of grid layout - CSS: Cascading Style Sheets
at this point, you may find it useful to work with the grid inspector, available as part of firefox's developer tools.
... grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } don't forget that you can use the grid inspector in firefox developer tools to see how the items are positioned against the lines of the grid.
Index - Developer guides
WebGuideIndex
there are several tools available to check the performance of a website or blog.
... the most notable tools are listed below.
User input and controls - Developer guides
once you decided the input mechanisms, you can control them using tools offered by the web platform or javascript libraries.
... the following is a set of recommendations and best practices for using such tools in open web apps.
<input type="hidden"> - HTML: Hypertext Markup Language
WebHTMLElementinputhidden
this specifically can't be edited or seen by the user via the user interface, although you could edit the value via browser developer tools.
... important: while the value isn't displayed to the user in the page's content, it is visible—and can be edited—using any browser's developer tools or "view source" functionality.
translate - HTML: Hypertext Markup Language
although not all browsers recognize this attribute, it is respected by automatic translation systems such as google translate, and may also be respected by tools used by human translators.
... examples in this example, the translate attribute is used to ask translation tools not to translate the company's brand name in the footer.
Using the application cache - HTML: Hypertext Markup Language
the offline cache can be cleared for each site separately using the "remove..." button in tools -> options -> advanced -> network -> offline data.
... prior to firefox 11, neither tools -> clear recent history nor tools -> options -> advanced -> network -> offline data -> clear now cleared the offline cache.
Compression in HTTP - HTTP
for images, an image generated by a tool could be not optimized enough for the web; it is recommended to use tools that will compress as much as possible with the required quality.
... there are numerous tools that are specialized for this.
Server-Timing - HTTP
database read/write, cpu time, file system access, etc.) in the developer tools in the user's browser or in the performanceservertiming interface.
... performanceservertiming interface in addition to having server-timing header metrics appear in the developer tools of the browser, the performanceservertiming interface enables tools to automatically collect and process metrics from javascript.
Introduction - JavaScript
these scripting languages offer programming tools to a much wider audience because of their easier syntax, specialized built-in functionality, and minimal requirements for object creation.
... to open the web console (ctrl+shift+i on windows and linux or cmd-option-k on mac), open the tools menu in firefox, and select "developer â–¶ web console".
Inheritance and the prototype chain - JavaScript
(the console is included in most web browser's developer tools.
... more information is available for firefox developer tools, chrome devtools, and edge devtools.) function dosomething(){} console.log( dosomething.prototype ); // it does not matter how you declare the function, a // function in javascript will always have a default // prototype property.
MathML
here you'll find links to documentation, examples, and tools to help you work with this powerful technology.
... mailing list newsgroup rss feed matrix chat room wiki used by mozilla contributors w3c math home www-math w3.org mail archive tools w3c validator mathzilla firefox add-on collection texzilla — javascript latex to mathml converter (live demo, firefox os webapp, firefox add-on, using in a web page, js program etc) latexml - convert latex documents into html+mathml web pages web equation - turn handwritten equations into mathml or latex mathjax - cross-browser javascript display engine for mathematics.
Populating the page: how browsers work - Web Performance
building the cssom is very, very fast and is not displayed in a unique color in current developer tools.
... rather, the "recalculate style" in developer tools shows the total time it takes to parse css, construct the cssom tree, and recursively calculate computed styles.
Performance budgets - Web Performance
a ~$200 android device over a 3g connection), using multiple tools.
... during development, there are a few tools to run checks against new or modified assets: a module bundler (e.g.
SVG documentation index - SVG: Scalable Vector Graphics
WebSVGIndex
283 svg filters tutorial svg filters primitives svg allows us to use similar tools as the bitmap description language such as the use of shadow, blur effects or even merging the results of different filters.
... 289 tools for svg intermediate, needsupdate, svg, tools now that we covered the basics of the svg internals, we will take a look at some tools to work with svg files.
Converting WebAssembly text format to wasm - WebAssembly
webassembly has an s-expression-based textual representation, an intermediate form designed to be exposed in text editors, browser developer tools, etc.
... this article explains a little bit about how it works, and how to use available tools to convert text format files to the .wasm assembly format.
console/plain-text - Archive of obsolete content
all of its methods are inherited from console.jsm (resource://gre/modules/devtools/console.jsm).
window/utils - Archive of obsolete content
in particular: null: get all window types navigator:browser: get "normal" browser windows devtools:scratchpad: get scratchpad windows navigator:view-source: get view source windows if you're not also passing options, you can omit this, and it's the same as passing null.
Low-Level APIs - Archive of obsolete content
dev/panel enables you to extend the firefox developer tools.
Release notes - Archive of obsolete content
firefox 34 highlights new api: dev/panel enables you to extend the firefox developer tools.
cfx - Archive of obsolete content
suppose your the following local.json is as follows: { "configs": { "ff40": ["-b", "/usr/bin/firefox-4.0"] } } you can run: cfx test --use-config=ff40 and it would be equivalent to: cfx test -a firefox -b /usr/bin/firefox-4.0 this method of defining configuration options can be used for all of the run, build, and test tools.
Chrome Authority - Archive of obsolete content
the sdk tools will emit a warning if it sees module code which references components directly.
Logging - Archive of obsolete content
but note that by default, calls to console.log() will not result in any output in the error console for any installed add-ons: this includes add-ons installed using the add-on builder or using tools like the extension auto-installer.
Using third-party modules (jpm) - Archive of obsolete content
open "index.js" and replace it with this: var menuitems = require("menuitem"); var menuitem = menuitems.menuitem({ id: "clickme", menuid: "menu_toolspopup", label: "click me!", oncommand: function() { console.log("clicked"); }, insertbefore: "menu_pageinfo" }); now run the add-on: jpm run -b nightly you should see a new menu item in the tools menu labeled "click me!".
JavaScript Daemons Management - Archive of obsolete content
"start" : "syncstart"](!this.backw); }; /* settings tools */ daemon.prototype.makeloop = function () { this.reversals = infinity; }; daemon.prototype.unmakeloop = function () { this.reversals = 0; }; daemon.prototype.setrate = function (vto) { var nrate = number(vto); if (!isfinite(nrate) || nrate < 1) { return; } this.rate = nrate; this.synchronize(); }; daemon.prototype.forceposition = function (vto) { if ...
Developing add-ons - Archive of obsolete content
jetpack developers only need to know the tools of the modern web: html, css, and javascript.
Extension Versioning, Update and Compatibility - Archive of obsolete content
there are quite a few tools you may use to generate hashes: various unix flavors include sha1sum, sha256sum and so on.
Install Manifests - Archive of obsolete content
examples <em:description>advanced foo tools.</em:description> developer the name(s) of co-developers.
Chapter 1: Introduction to Extensions - Archive of obsolete content
perhaps things like fine-grained tab controls, mouse gestures, extensive toolbars and buttons, a feed reader, integration with a variety of web applications, or sophisticated tools to assist with web design.
Handling Preferences - Archive of obsolete content
to open the preferences window in firefox, select the following from the main menu: on windows, tools > options on mac, firefox > preferences on linux, edit > preferences note: keep in mind the usage of the terms "preferences" and "options" in different platforms.
Extensions support in SeaMonkey 2 - Archive of obsolete content
it_popup menu_editpopup edit menu popup menu_viewpopup menu_view_popup menu_view_popup view menu popup - gopopup gopopup go menu popup placespopup - - history menu popup bookmarksmenupopup menu_bookmarkspopup menu_bookmarkspopup bookmarks menu popup menu_toolspopup taskpopup taskpopup tools menu popup - windowpopup windowpopup window menu popup menu_helppopup helppopup helppopup help menu popup urlbar icons to display a button with a menupopup in the urlbar-icons for both firefox and seamonkey 2.0, use this code: <hbox id="urlbar-icons"> <image pop...
Security best practices in extensions - Archive of obsolete content
it could be the case that your extension provides a different tool or tools for services on your site.
Add-ons - Archive of obsolete content
the sdk includes javascript apis, which you can use to create add-ons and tools for creating, running, testing, and packaging add-ons.
List of Former Mozilla-Based Applications - Archive of obsolete content
applications that switched to another technology name description additional information angelsoft tools for startups, vcs, and angel investors switched from xulrunner-based client to a web application autodesk maya 3d modeling tool switched off of gecko for help browser in version 8.5 blam feed reader switched to webkit in version 1.8.6 boxee media center software switched to webkit in version 1.0 epiphany browser switched from gecko to webkit flock social browsing ...
MMgc - Archive of obsolete content
arser.cpp:948 … 0.8% - 24 kb - 1 items - poolobject.cpp:29 abcparser.cpp:948 … class avmplus::string - 13.2% - 1602 kb 15675 items, avg 104b 65.6% - 1051 kb - 14397 items - stringobject.cpp:46 avmcore.cpp:2300 … 20.4% - 326 kb - 10439 items - avmcore.cpp:2300 abcparser.cpp:1077 … 6.5% - 103 kb - 3311 items - avmcore.cpp:2300 abcparser.cpp:1077 … other profiling tools the gcstats flag on the gc object controls verbose output.
Makefile - .mk files - Archive of obsolete content
makefile description client.mk top level makefile which controls the overall build config/android-common.m config/autoconf.mk config/rules.mk targets (export, deps, libs, tools) and generic build rules config/static-checking-config.mk config/version.mk makefile description config/myconfig.mk user defined build configuration values config/myrules.mk user defined makefile rules for building $(topsrcdir)/$(moz_build_app)/app-config.mk application specific build configuration ...
Automatic Mozilla Configurator - Archive of obsolete content
w thunderbird and firefox find their configuration files automatic mozilla configurator:protecting mozilla's registry.dat file automatic mozilla configurator:enabling quicklaunch for all users automatic mozilla configurator:kill the xul.mfl file for good automatic mozilla configurator:locked config settings automatic mozilla configurator:other mozilla customization pages online configurator tools: registry.dat mozilla.cfg (locked preferences) ...
Bonsai - Archive of obsolete content
it also includes tools for looking at checkin logs (and comments); doing diffs between various versions of a file; and finding out which person is responsible for changing a particular line of code ("cvsblame").
Bookmark Keywords - Archive of obsolete content
for example, a keyworded bookmark could be set up so that a user could type <tt>google spam and eggs</tt> and thereby trigger a google search for the words "spam and eggs." because these tools require bookmarks with specific keywords in order to work, they will be referred to hereafter as keymarks, as distinct from regular bookmarks.
Finding the file to modify - Archive of obsolete content
to access it, go to the "tools" menu, select the "web development" submenu, then select the "dom inspector" item.
Creating a Microsummary - Archive of obsolete content
note: if you are a web site developer, and you want to create microsummaries for pages on your site, you can write generators to do so, but a simpler and more efficient approach is to create the microsummaries on the server-side using the same tools and languages you already use to generate pages.
In-Depth - Archive of obsolete content
then open the dom inspector (tools->web development->dom inspector).
Dehydra - Archive of obsolete content
mailing list newsgroup rss feed #static on irc.mozilla.org blogs taras glek david mandelin benjamin smedberg related topics pork c/c++ refactoring tools, mozilla 2, spidermonkey categories interwiki language links ...
Isp Data - Archive of obsolete content
tools needed the files are simple text files, in utf-8 encoding, so use your favorite modern text editor.
Simple Storage - Archive of obsolete content
all notes are shown in the tools menu.
Simple Storage - Archive of obsolete content
all notes are shown in the tools menu.
jspage - Archive of obsolete content
var mootools={version:"1.2.4",build:"0d9113241a90b9cd5643b926795852a2026710d4"};var native=function(k){k=k||{};var a=k.name;var i=k.legacy;var b=k.protect; var c=k.implement;var h=k.generics;var f=k.initialize;var g=k.afterimplement||function(){};var d=f||i;h=h!==false;d.constructor=native;d.$family={name:"native"}; if(i&&f){d.prototype=i.prototype;}d.prototype.constructor=d;if(a){var e=a.tolowercase();d.prototype.$family={name:e};native.typize(d,e);}var j=function(n,l,o,m){if(!b||m||!n.prototype[l]){n.prototype[l]=o; }if(h){native.genericize(n,l,b);}g.call(n,l,o);return n;};d.alias=function(n,l,p){if(typeof n=="string"){var o=this.prototype[n];if((n=o)){return j(this,l,n,p); }}for(var m in n){this.alias(m,n[m],l);}return this;};d.implement=function(m,l,o){if(typeof m=="string"){return ...
Monitoring downloads - Archive of obsolete content
the result is a window you can open by choosing "download log" in the tools menu, which lists all downloads that have been started since you installed the extension.
Mozilla Application Framework in Detail - Archive of obsolete content
tools including various xpcom manager interfaces, smart pointers, special string classes, and an extensive collection of macros that make your c++ implementations easy to write and extend.
BundleLibrary - Archive of obsolete content
p bloglines : bloglines.webapp bloglines beta: beta.bloglines.webapp chandler: chandler.webapp flash earth (integrates all major mapping sites) flashearth.webapp flickr: flickr.webapp gollum wikipedia browser in english:gollum_en.webapp google notebook: gnote.webapp google page creator: google_pagecreator.webapp google reader + gtalk : prism-bundle-google-reader-with-gtalk.webapp google webmaster tools: google_webmastertools.webapp grandcentral inbox: grandc.webapp (note: grandcentral requires the flash plugin.
Extensions - Archive of obsolete content
many archive tools, like 7zip, can edit and update a file in the archive without needing to manually extract it and add it back into the xpi.
Prism - Archive of obsolete content
we can also benefit from operating system tools that lets us view the memory/cpu consumption of a specific application.
Priority Content - Archive of obsolete content
keller equivalents security developer central -> security plugins central -> plugins devedge community -> mozilla web developer community notes from devmo wishlist devedge toolbox tools on devedge examples on devedge started: devedge sidebar completed: standards-compliant authoring tools on devedge mostly completed: tools:validators on devedge dependant on the sidebar tabs and the tune-up wizard.
Static Analysis for Windows Code under Linux - Archive of obsolete content
host_libidl_config=/usr/bin/libidl-config #config your moztools position glib_prefix=$home/moztools libidl_prefix=$home/moztools #disable xpcom stdcall calling convention because of gcc 4.3.0 bug cppflags="-dmoz_disable_xpcom_stdcall" #specify the cxx and static analysis #point cxx to the cross compile g++ with plugin support cxx=$home/mingw-install/bin/i686-mingw32-g++ ac_add_options --with-static-checking=$home/dehydra/dehydra-gcc/gcc_dehydra.so then, yo...
Stress testing - Archive of obsolete content
tools for microsoft windows consume.exe from the windows server 2003 resource kit tools can consume various resources: physical memory, cpu time, page file, disk space and even the kernel pool.
Running Tamarin acceptance tests - Archive of obsolete content
if you've correctly edited and run the android-vars.sh script mentioned on the tamarin build documentation page you should already be pathed to the adb executable in the public sdk/ndk, but if not it exists at /android-public/android-sdk-mac_86/platform-tools.
Running Tamarin performance tests - Archive of obsolete content
if you've correctly edited and run the android-vars.sh script mentioned on the tamarin build documentation page you should already be pathed to the adb executable in the public sdk/ndk, but if not it exists at /android-public/android-sdk-mac_86/platform-tools.
Tamarin Acceptance Testing - Archive of obsolete content
to build and setup the tools see building_tamarin_windows_mobile_utilities.
Treehydra - Archive of obsolete content
mailing list newsgroup rss feed #static on irc.mozilla.org blogs taras glek david mandelin related topics pork c/c++ refactoring tools, mozilla 2, spidermonkey categories interwiki language links ...
Venkman - Archive of obsolete content
learning the javascript debugger venkman written by svend tofte to the javascript programmers who are not familiar with other debugging tools.
Install Wizards (aka: Stub Installers) - Archive of obsolete content
it contains some files to be installed and the install script, usually named install.js, which contains javascript directives for actions to take during an install including adding files and directories, removing old or obsolete files and directories, executing command line tools, etc.
XPInstall - Archive of obsolete content
mailing list newsgroup rss feed tools xpinstall trigger page related topics extensions, xul, xpi ...
windowtype - Archive of obsolete content
values for window type as found on mxr: http://mxr.mozilla.org/mozilla-release/search?string=windowtype navigator:browser - looks like if window has gbrowser it has this window type devtools:scratchpad - scratchpad windows navigator:view-source - the view source windows ...
Building accessible custom components in XUL - Archive of obsolete content
black; margin: 0; padding: 3px; } grid.spreadsheet description { color: black; background-color: white; margin: 0px; padding: 2px; border-left: thin solid; border-bottom: thin solid; font-family: monospace; font-size: 12pt; text-align: center; font-weight: bold; } </code> you can see the results by installing stage-1.xpi, restarting firefox, and selecting accjax from the tools menu.
Introduction to XUL - Archive of obsolete content
the intention is to build cross-platform applications like browsers and mail clients from a set of tools designed for that purpose.
Floating Panels - Archive of obsolete content
a floating panel can be created using the panel element with at least two additional attributes as in the following example: <panel id="tools-panel" noautohide="true" titlebar="normal"> <label control="name" value="name:"/> <textbox id="name"/> </panel> the noautohide attribute is used to indicate that the panel is not temporary.
Special per-platform menu considerations - Archive of obsolete content
here is an example: <menubar> <menu label="tools"> <menupopup> <menuitem label="spell check"/> <menuitem id="menu_preferences" label="preferences" oncommand="window.opendialog('options.xul', '_new', 'chrome');"/> </menupopup> </menu> </menubar> this menu item will be placed on the application menu on the macintosh but left in the tools menu on other platforms.
Template Logging - Archive of obsolete content
the error console can be found on the firefox tools menu.
Creating a Window - Archive of obsolete content
choose tools – error console, type a line of javascript, and press the evaluate button, or the return or enter key.
Using Visual Studio as your XUL IDE - Archive of obsolete content
go to tools > options...
window - Archive of obsolete content
values for window type as found on mxr: http://mxr.mozilla.org/mozilla-release/search?string=windowtype navigator:browser - looks like if window has gbrowser it has this window type devtools:scratchpad - scratchpad windows navigator:view-source - the view source windows properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , pe...
wizard - Archive of obsolete content
values for window type as found on mxr: http://mxr.mozilla.org/mozilla-release/search?string=windowtype navigator:browser - looks like if window has gbrowser it has this window type devtools:scratchpad - scratchpad windows navigator:view-source - the view source windows properties canadvance type: boolean this property is set to true if the user can press the next button to go to the next page.
XUL - Archive of obsolete content
mailing list newsgroup rss feed #xul on irc.mozilla.org tools xul online live editor (copy & paste snippets from here and run them) xul explorer (a lightweight xul ide) xulexplorer (patched version of xul explorer) extension developer's extension (featuring a live xul editor) xulref sidebar firebug dom inspector spket ide, ide for xul/xbl ample sdk, (cross-br...
XULRunner Hall of Fame - Archive of obsolete content
latest release: june 2010 - build instructions utilities / prototypes ajax toolkit framework (atf) a part of the eclipse web tools platform (wtp) aliwal geocoder geocode addresses onto a map benjamin's xulrunner examples "mybrowser is a very simple example browser", xulmine.
XULRunner tips - Archive of obsolete content
you'll probably also want to create menuitems that let you open the js shell and other tools provided by the extension.
symsrv_convert - Archive of obsolete content
for me this was c:/windows/syswow64/ ./symsrv_convert.exe http://msdl.microsoft.com/download/symbols /c/symcachet d3d10_1.pdb 64bce4f6b72340f19c453569a3f4a13b1 to build symsrv_convert you'll need to use google-breakpad/src/tools/windows/converter ...
2006-11-03 - Archive of obsolete content
source code for the nsinstall contained in moztools a user asks for advice about building nsinstall on windows.
2006-11-04 - Archive of obsolete content
code for the nsinstall contained in moztools a user asks for advice about building nsinstall on windows.
2006-10-06 - Archive of obsolete content
discussion highlights: ziga sancin suggests writing an introductory article for potential developers containing basic project information (history, list of main developers, project goals, roadmap and available communication channels, etc), tools needed to start developing and building tb, documentation on source structure as well as links to help one get started on the project.
2006-10-27 - Archive of obsolete content
./configure --prefix=/export/home/alex/thunderbird --enable-application=browser --disable-tests --disable-debug -disable-auto-deps --disable-freetype2 -enable-official-branding --enable-default-toolkit=gtk2 --enable-optimize=-xo5 --enable-static --disable-shared --enable-xft --enable-svg the build tools that he used to build firefox 2 are listed in his posting along with the error that he receives when he tries to build it.
JS-Engine FAQ - Archive of obsolete content
how to compile javascript into java invoking compiler: java org.mozilla.javascript.tools.jsc.main [options] file1.js [file2.js...] this results in a class file.
External resources for plugin creation - Archive of obsolete content
frameworks and tools there are several open source projects designed to assist with the creation of npapi plugins.
Writing a plugin for Mac OS X - Archive of obsolete content
ng extern "c" in the header, like this: #pragma gcc visibility push(default) extern "c" { nperror np_initialize(npnetscapefuncs *browserfuncs); nperror np_getentrypoints(nppluginfuncs *pluginfuncs); void np_shutdown(void); } #pragma gcc visibility pop you can check to be sure your symbols are visible and in standard c format by using the nm utility provided among the mac os x developer tools: [user@foo mymac] nm basicplugin ...
Atomic RSS - Archive of obsolete content
ArchiveRSSModuleAtom
references atomic rss element list examples none available at this time community none available at this time tools none available at this time other resources tim bray's atom rss article rss, atom, rdf, xml ...
Content - Archive of obsolete content
references rss content module element list examples none available at this time community none available at this time tools none available at this time other resources rss content module spec rss, rdf, xml ...
Slash - Archive of obsolete content
ArchiveRSSModuleSlash
references rss slash module element list examples none available at this time community none available at this time tools none available at this time other resources rss slash module slash slashdot rss, rdf, xml ...
Well-Formed Web - Archive of obsolete content
references rss well-formed web module element list examples none available at this time community none available at this time tools none available at this time other resources well-formed web spec rss, rdf, xml ...
Introduction to Public-Key Cryptography - Archive of obsolete content
object signing communicator supports a set of tools and technologies called object signing.
Create Your Own Firefox Background Theme - Archive of obsolete content
online image editor resources pixlr — pixlr offers professional and easy-to-use tools for creating and editing images within a browser.
References - Archive of obsolete content
from matt kruse debugging html and css is a well designed website explaining well the how, why and where of html validation, css validation and debugging tools.
Introduction - Archive of obsolete content
serializing one of the most powerful tools of e4x is its ability to serialize an entire xml document (or portion thereof) into a string with one simple call to .toxmlstring() var element1 = <foo/>; var element2 = <bar/>; element1.appendchild(element2); element1.toxmlstring(); this will print <foo> <bar/> </foo> calling tostring() will achieve the same effect in this case, though calling tostring() on an element with only text con...
Debug.msTraceAsyncCallbackStarting - Archive of obsolete content
note: some debugging tools do not display the information sent to the debugger.
Debug.msTraceAsyncCallbackCompleted - Archive of obsolete content
the possible values for status include: debug.ms_async_op_status_success debug.ms_async_op_status_canceled debug.ms_async_op_status_error note: some debugging tools do not display the information sent to the debugger.
Debug.msUpdateAsyncCallbackRelation - Archive of obsolete content
note: some debugging tools do not display the information sent to the debugger by this function.
RDF: Resource Description Framework for metadata - Archive of obsolete content
ArchiveWebRDF
mailing list newsgroup rss feed rdf-dev mailing list tools rdf editors and tools rdf validator related topics xml categories interwiki language links ...
Troubleshooting XForms Forms - Archive of obsolete content
always check the javascript console (tools, javascript console) for errors.
XForms - Archive of obsolete content
tools xforms validator xforms buddy related topics extensions, html, xhtml, xml, xpath ...
RDF in Mozilla FAQ - Archive of obsolete content
those lists would probably also be interested in tools for cleaning / re-processing / storing the dmoz data too.
Web Standards - Archive of obsolete content
tools firebug extension web developer extension markup validation service (w3c) css validation service (w3c) examples mozilla 1.0 demos - showing off what can be done with web standards.
XUL Parser in Python - Archive of obsolete content
but mozilla's upcoming support for languages like perl and python will really open up the mozilla platform to tools and approaches of this kind--and make now a good time to start thinking about how these various technologies will be put together.
Game promotion - Game development
while you can create your website from scratch, there are also tools that can help make the process easier.
Building up a basic demo with A-Frame - Game development
the webxr and webgl apis already enable us to start creating virtual reality (vr) experiences inside web browsers, but the community is still waiting for tools and libraries to appear, to make this easier.
2D breakout game using pure JavaScript - Game development
frameworks are just tools built with the javascript language; so even if you plan on working with them, it's good to learn about the language itself first to know what exactly is going on under the hood.
Visual-js game engine - Game development
( + server engine tools + server part of web apps ) -3d part : webgl based on three.js engine -3d part : webgl2 based on glmatrix 2.0 -2d part (new): this is typescript based game engine (client part ts).
ATAG - MDN Web Docs Glossary: Definitions of Web-related terms
atag (authoring tool accessibility guidelines) is a w3c recommendation for building accessible-authoring tools that produce accessible contents.
Compile - MDN Web Docs Glossary: Definitions of Web-related terms
those are considered productivity tools.
Effective connection type - MDN Web Docs Glossary: Definitions of Web-related terms
to see your effective connection type, open the console of the developer tools of a supporting browser and enter the following: navigator.connection.effectivetype; see also: network information api networkinformation networkinformation.effectivetype ...
First interactive - MDN Web Docs Glossary: Definitions of Web-related terms
these metrics have been proposed by the web incubator community group and are already being used in various tools.
Fuzz testing - MDN Web Docs Glossary: Definitions of Web-related terms
fuzzing is a technique for testing software using automated tools to provide invalid or unexpected input to a program or function in a program, then checking the results to see if the program crashes or otherwise acts inappropriately.
IDE - MDN Web Docs Glossary: Definitions of Web-related terms
an ide normally consists of a source code editor, build automation tools and a debugger.
JSON - MDN Web Docs Glossary: Definitions of Web-related terms
many tools provide translation between these formats such as this online json to csv converter or this alternative json to csv converter.
REST - MDN Web Docs Glossary: Definitions of Web-related terms
beginners can assume a rest api means an http service that can be called using standard web libraries and tools.
Robots.txt - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge robots.txt on wikipedia https://developers.google.com/search/reference/robots_txt standard specification draft: https://tools.ietf.org/html/draft-rep-wg-topic https://www.robotstxt.org/ ...
SVG - MDN Web Docs Glossary: Definitions of Web-related terms
svg also provides a useful set of tools, such as clipping, masking, filters, and animations.
Syntax error - MDN Web Docs Glossary: Definitions of Web-related terms
browser development tools display javascript and css syntax errors in the console.
Time to interactive - MDN Web Docs Glossary: Definitions of Web-related terms
although available in some performance monitoring tools, tti is not a part of any official web specification at the time of writing.
Validator - MDN Web Docs Glossary: Definitions of Web-related terms
validators can be created for any format or language, but in our context we speak of tools that check html, css, and xml.
minification - MDN Web Docs Glossary: Definitions of Web-related terms
as minification makes code less legible to humans, developer tools have 'prettification' features that can add white space back into the code to make it a bit more legible.
MDN Web Docs Glossary: Definitions of Web-related terms
scripting crud cryptanalysis cryptographic hash function cryptography csp csrf css css object model (cssom) css pixel css preprocessor d data structure decryption delta denial of service descriptor (css) deserialization developer tools dhtml digest digital certificate distributed denial of service dmz dns doctype document directive document environment dom (document object model) domain domain name domain sharding dominator dos attack dtls (datagram transport layer security) dt...
Test your skills: CSS and JavaScript accessibility - Learn web development
explain what tools or methods you used to select the new values and test the code.
CSS and JavaScript accessibility best practices - Learn web development
there are a number of contrast checking tools online that you can enter your foreground and background colors into, to check them.
HTML: A good basis for accessibility - Learn web development
these provide extra semantics for screen readers (and other tools) to give user extra clues about the content they are navigating (see screen reader support for new html5 section elements for an idea of what screen reader support is like).
HTML: A good basis for accessibility - Learn web development
these provide extra semantics for screen readers (and other tools) to give user extra clues about the content they are navigating (see screen reader support for new html5 section elements for an idea of what screen reader support is like).
Mobile accessibility - Learn web development
previous overview: accessibility next with web access on mobile devices being so popular and renowned platforms such as ios and android having full-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms.
Cascade and inheritance - Learn web development
the below video shows how you can use the firefox devtools to inspect a page's cascade, specificity, and more: understanding inheritance we'll start with inheritance.
Overflowing content - Learn web development
css provides various tools to manage overflow.
Styling tables - Learn web development
this includes information on using browser devtools to find solutions to your problems.
CSS building blocks - Learn web development
this article will give you guidance on how to go about debugging a css problem, and show you how the devtools included in all modern browsers can help you find out what is going on.
Floats - Learn web development
previous overview: css layout next originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages.
Introduction to CSS layout - Learn web development
for many of the elements on your page the normal flow will create exactly the layout you need, however for more complex layouts you will need to alter this default behavior using some of the tools available to you in css.
Test your skills: Media Queries and Responsive Design - Learn web development
you can drag your window smaller or use the responsive design view in firefox devtools to view this as if on a phone.
Styling links - Learn web development
styling links as buttons the tools you've explored so far in this article can also be used in other ways.
How do you host your website on Google App Engine? - Learn web development
creating a google cloud platform project to use google's tools for your own site or app, you need to create a new project on google cloud platform.
Styling web forms - Learn web development
as well as the basic css tools covered above, we've also been provided with several selectors — ui pseudo-classes — that enable styling based on the current state of the ui.
Web forms — Working with user data - Learn web development
other form controls next we take a look at all the non-<input> form controls and associated tools, such as <select>, <textarea>, <meter>, and <progress>.
HTML basics - Learn web development
users with significant visual impairments often use tools called screen readers to read out the alt text to them.
What will your website look like? - Learn web development
click on the tools button, then on the resulting usage rights option that appears below.
Use HTML to solve common problems - Learn web development
LearnHTMLHowto
it provides tools to handle common internationalization issues.
Introduction to HTML - Learn web development
this article will introduce you to some tools that can help.
Multimedia and Embedding - Learn web development
responsive images in this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools html provides to help implement them.
HTML table advanced features and accessibility - Learn web development
to check this, open up one of your previous examples that doesn't include <tbody> and look at the html code in your browser developer tools — you will see that the browser has added this tag for you.
General asynchronous programming concepts - Learn web development
our example from above is run like this: main thread: render circles to canvas --> display alert() after some time, javascript gained some tools to help with such problems.
Graceful asynchronous programming with Promises - Learn web development
the error will be reported in the console of your browser's developer tools.
Build your own function - Learn web development
now open your browser developer tools on the example page, go to the javascript console and type the line again there, you'll see it appear again!
Functions — reusable blocks of code - Learn web development
open the javascript console in your browser developer tools.
Video and Audio APIs - Learn web development
in the next section we'll look at the basic tools we have available to do this.
Client-side web APIs - Learn web development
drawing graphics the browser contains some very powerful graphics programming tools, from the scalable vector graphics (svg) language, to apis for drawing on html <canvas> elements, (see the canvas api and webgl).
Solve common problems in your JavaScript code - Learn web development
what are browser developer tools, and how do you access them?
Test your skills: Object-oriented JavaScript - Learn web development
call your calcperimeter() method on the instance, to see whether it logs the calculation result to the browser devtools' console as expected.
Perceived performance - Learn web development
this article provides a brief introduction to perceived performance, looking at user perceptions, and what objective tools can be used to measure that which is subjective.
Multimedia: video - Learn web development
if not, there are online tools, such as ffmpeg (discussed in section below), that encode, decode, convert, and perform other optimization functions.
The "why" of web performance - Learn web development
the decisions you make and the tools you choose as you build your site can greatly affect the performance of the finished work.
Properly configuring server MIME types - Learn web development
how to determine the mime type sent by a server in firefox, load the file and use tools | page info.
Ember resources and troubleshooting - Learn web development
mework-specific things, there is the ember-inspector add-on, which allows inspection of: routes & controllers components services promises data (i.e: from a remote api — from ember-data, by default) deprecation information render performance for general javascript debugging, check out our guides on javascript debugging as well as interacting with the browser's other debugging tools.
Getting started with React - Learn web development
gitbash (which comes as part of the git for windows toolset) or windows subsystem for linux (wsl) are both suitable.
React interactivity: Events and state - Learn web development
in fact, react will give you a warning in your devtools console — "warning: encountered two children with the same key..." we need to fix this.
Deployment and next steps - Learn web development
vercel is a cloud platform specifically tailored for static sites, which has out-of-the-box support for most common front-end tools, svelte being one of them.
Getting started with Vue - Learn web development
this allows you to use tools like babel, typescript, scss and more to create more sophisticated components.
Vue resources - Learn web development
building and publishing your vue app the vue cli also provides us with tools for preparing our app for publishing to the web.
Styling Vue components with CSS - Learn web development
while this tutorial will not be using such tools, it's good to know that when including such code in the assets folder it will be processed automatically.
Implementing feature detection - Learn web development
if you look at the dom inspector of your browser's developer tools, you'll see that modernizr has updated your <html> class value like so: <html class="js no-htmlimports sizes flash transferables applicationcache blobconstructor blob-constructor cookies cors ...and loads more values!> it now contains a large number of classes that indicate the support status of different technology features.
omni.ja (formerly omni.jar)
several unzip tools and archives (except for the latest version of 7-zip) currently cannot read omni.ja, due to the optimization that is applied to the file.
Accessibility API cross-reference
<h> is also available but its use is not recommended because of lack of suitable tools - and the heading level is undefined click on this thing and then click on the item for tooltip style help helpballoon n/a n/a n/a editable field that allows user to assign a key combination hotkeyfield n/a n/a n/a graphic that indicates something, such as an arrow indicator n/a n/a n/a ...
Accessibility information for UI designers and developers
see also: understanding sc 2.4.7: focus visible be ready for resizing and custom styles on the web, users can use tools in their browser to make font sizes larger, or even provide custom css to meet their specific needs.
CSUN Firefox Materials
extensions can easily be installed or removed with the extension manager in the tools menu.
Software accessibility: Where are we today?
see see also below for information and tools for both web and desktop application developers.
Index
these processes include minifying your code, as well as the use of module bundlers or similar tools, such as webpack.
Lightweight themes
online image editor resources pixlr — pixlr offers professional and easy-to-use tools for creating and editing images within a browser.
Themes
tools & resources browser theme manifest.json keys browser extensions theme api discourse forum theme related blog posts archived resources ...
Android-specific test suites
see https://developer.android.com/studio/write/lint.html and http://tools.android.com/tips/lint for more details.
Testopia
links faq wiki docs bugs (please read the bug reporting guide) official testopia blog irc: #testopia or #bugzilla user help support-webtools@lists.mozilla.org developers dev-apps-webtools@lists.mozilla.org downloads download 2.5 (bugzilla 4.2) download 2.4 (bugzilla 3.6 and 4.0) archived versions developers greg hendricks vance baarda (former developer) ed fuentetaja (former developer) ...
Bugzilla
testopia - test case management extension bugzilla.org - the project site wikipedia:bugzilla - general description of bugzilla (not specific to mozilla projects) bmo on wiki.mozilla.org - information about mozilla's customized bugzilla installation, including how to contribute to it tools bugzilla todos lists review and flag requests, patches to check in, unfulfilled requests you made of other people, and assigned bugs.
Creating MozSearch plugins
firefox will use the above search engine description to construct the following search url: http://search.yahoo.com/search?p=mozilla&ei=utf-8&fr=moz2 if the user clicks the magnifying glass icon in the search bar, or chooses the web search option in the tools menu when the search bar isn't visible, the browser will take them to http://search.yahoo.com/, the value of the <searchform> element.
Building Firefox with Debug Symbols
see https://dxr.mozilla.org/mozilla/source/toolkit/crashreporter/tools/upload_symbols.sh for more information about the environment variables used by this target.
Gmake vs. Pymake
mozilla supports building with two different (but mostly compatible) build tools: gmake and pymake.
Makefile - variables
viewer moz_native_nspr moz_metro moz_pkg_mainfest moz_preflight_all moz_rdf moz_toolkit_search moz_url_classifier moz_widget_toolkit android, beos, cocoa, gtk2, os2, qt, windows moz_xpctools moz_xul moz_x11 test variable description enable_tests boolean value that should wrapper all unit tests to allow disabling on demand[1].
Obsolete Build Caveats and Tips
this has resulted in many caveats and tips being added to the mdn documentation for building older versions of the code base or dealing with older build tools.
Index
found 172 pages: # page tags and summary 1 firefox firefox, landing, mozilla here you can learn about how to contribute to the firefox project and you will also find links to information about the construction of firefox add-ons, using the developer tools in firefox, and other topics.
Performance best practices for Firefox front-end engineers
unless you need precisely accurate information, they can be valuable tools in your performance toolbox.
Site Identity Button
if the site identity button on your site shows something you do not expect (for example, an orange warning triangle when you expect a green padlock) you can find out the cause of the problem by looking in the web console in the firefox developer tools: ensure your web console is displaying messages in the 'security' category force-refresh the page on your site that is causing problems watch for any security messages that may appear a downgraded security ui will be due to one of these three problems: mixed content - while your page has been served over tls, but subresources loaded for your page have not.
Firefox and the "about" protocol
about:crashes lists all crashes, which happened during the runtime of firefox (in case the user enabled the crash reporter) about:credits lists all contributors to the firefox project about:debugging switches to the developer tools debugging page, which allows you to debug add-ons, tabs and service workers about:devtools summarizes the developer tools and provides links to documentation for each tool about:downloads displays all downloads done within firefox about:home start page of firefox when opening a new window about:license displays licensing information about:l...
Firefox Operational Information Database: SQLite
(install the sqlite mangager add-on, click tools -> sqlite manager.
Using the Browser API
MozillaGeckoChromeAPIBrowser APIUsing
it was originally used in firefox os to implement browser applications before that project was cancelled; since firefox 47 it is available to desktop chrome code and used in places like the firefox devtools.
Browser API
browser api methods removed in firefox 65 in firefox 65, several of the mozilla browser api methods were removed in an effort to cut down on domrequest usage in the browser, and remove the parts of the browser api that are no longer needed (it is used only by the firefox devtools at this point).
JavaScript OS
the javascript os module contains tools that allow chrome content (i.e.
SourceMap.jsm
get a reference to the module: let sourcemap = {}; components.utils.import('resource:///modules/devtools/sourcemap.jsm', sourcemap); sourcemapconsumer a sourcemapconsumer instance represents a parsed source map which we can query for information about the original file positions by giving it a file position in the generated source.
Bootstrapping a new locale
(read more about tools at l10n:tools.) after you have downloaded your editor of choice, type the following command in the same path from above (~/ab-cd/browser/chrome/browser) $ edit ab-cd/browser/chrome/browser/aboutcerterror.dtd read the top of the file to get any context on how to translate contained in the notes written by the developers or l10n-drivers.
Localization and Plurals
after installing the extension, it should be available from the tools menu.
Localization notes
there are a number of automated tools that parse these comments for easier access and use by localizers.
Localizing with Mercurial
this will not only install hg, but also all the tools required to build mozilla products on windows.
Localizing without a specialized tool
(read more about tools at l10n:tools.) after you have downloaded your editor of choice, type the following command in the same path from above (l10n-mozilla-1.9.2/x-testing/browser/chrome/browser) $ edit l10n-mozilla-1.9.2/x-testing/browser/chrome/browser/aboutcerterror.dtd read the top of the file to get any context on how to translate contained in the notes written by the developers or l10n-drivers.
Localization prerequisites
tools a recent posix shell python 2.5 or newer.
Release phase
you've setup up your local and remote environments, you've selected your l10n tools and projects, done some localization and even some testing!
Localization technical reviews
allows us to discover potential bugs within l10n tools.
What every Mozilla translator should know
to keep the track of what's going on, it's also a good idea to read the planet mozilla l10n when you have a problem use the above mailing lists the person in charge of the mozilla l10n is axel hecht (l10n at mozilla.com), pike on irc another interesting way of getting help is the irc channel #l10n at irc.mozilla.org useful tools the l10n dashboard pontoon narro translate toolkit koala 0.1 mozillatranslator mercurial the hg is organized into several repositories, sometimes called branches.
Fonts for Mozilla's MathML engine
you can use fontforge and fonttools to edit the math table and create your own mathematical fonts.
GPU performance
tools pix - can do timing of direct3d calls.
Leak Gauge
post-processing a log file post-process the log file with tools/leak-gauge/leak-gauge.pl or tools/leak-gauge/leak-gauge.html.
Profiling with Instruments
click the record button (red circle in top left) wait for the amount of time that you want to profile click the stop button command line tools there is instruments and iprofiler.
Scroll-linked effects
this article discusses scroll-linked effects, their effect on performance, related tools, and possible mitigation techniques.
TimerFirings logging
2082435840[100445640]: [81190] fn timer (one_shot 8000 ms): [from dladdr] gfxfontinfoloader::delayedstartcallback(nsitimer*, void*) second, on linux the code uses dladdr to get the symbol library and address, which can be post-processed by tools/rb/fix_stacks.py.
JSHydra
it is inspired by the dehydra and treehydra tools, which can perform similar tasks in c++ code.
AsyncTestUtils extended framework
if you aren't using logsploder, then this just makes your tests fail if errors get logged to the error console (like you see if you go to the "tools | error console" menu).
MailNews automated testing
enhanced logging: supports generating rich json streams to disk or over the network for consumption by logsploder or other tools.
McCoy
however, there are several external and unofficial tools which enable signing from command line: uhura - part of the mxtools package from softlights http://www.softlights.net/projects/mxtools/uhura.html signontheline - an extension to mccoy - important: you have to checkout rev 222, later revisions are not working in mccoy!
NSPR build instructions
the easiest way to get these tools is to install the mozillabuild package.
NSS_3.11.10_release_notes.html
the tar.gz or zip file expands to an nss-3.11.10 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr 4.7.1 binary distributions to get the nspr 4.7.1 header files and shared libraries, which nss 3.11.10 requires.
NSS_3.12.1_release_notes.html
the tar.gz or zip file expands to an nss-3.12.1 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr 4.7.1 binary distributions to get the nspr 4.7.1 header files and shared libraries, which nss 3.12.1 requires.
NSS 3.14.2 release notes
initial manual pages for some nss command line tools have been added.
NSS 3.14 release notes
the old options to disable ssl 2, ssl 3 and tls 1.0 have been removed and replaced with a new -v option that specifies the enabled range of protocol versions (see usage output of those tools).
NSS 3.16.2 release notes
the certutil commands supports generic certificate extensions, by loading binary data from files, which have been prepared using external tools, or which have been extracted and dumped to file from other existing certificates: --dump-ext-val oid --extgeneric oid:critical-flag:filename[,oid:critical-flag:filename]...
NSS 3.17 release notes
new macros in ssl.h ssl_reuse_server_ecdhe_key notable changes in nss 3.17 the manual pages for the certutil and pp tools have been updated to document the new parameters that had been added in nss 3.16.2.
NSS 3.46 release notes
hangs on windows x64 when building nss since changeset 9162c654d06915f0f15948fbf67d4103a229226f bug 1564875 - improve rebuilding with build.sh bug 1565243 - support tc_owner without email address in nss taskgraph bug 1563778 - increase maxruntime on mac taskcluster tools, ssl tests bug 1561591 - remove -wmaybe-uninitialized warning in tstclnt.c bug 1561587 - remove -wmaybe-uninitialized warning in lgattr.c bug 1561558 - remove -wmaybe-uninitialized warning in httpserv.c bug 1561556 - remove -wmaybe-uninitialized warning in tls13esni.c bug 1561332 - ec.c:28 warning: comparison of integers of different signs: 'int' and 'unsigned long' bug 1564714 - print cert...
NSS Sample Code Utilities_1
se file read der encoding from a file extract the password from a text file get the module password print as ascii or hexadecimal sample code #include <prlog.h> #include <termios.h> #include <base64.h> #include <unistd.h> #include <sys/stat.h> #include <prprf.h> #include "util.h" /* * these utility functions are adapted from those found in * the sectool library used by the nss security tools and * other nss test applications.
PKCS11 FAQ
MozillaProjectsNSSPKCS11FAQ
first open the tools/options/advanced/security window in mozilla and click security devices.
PKCS 12 functions
the public functions listed here perform pkcs #12 operations required by some of the nss tools and other applications.
PKCS 7 functions
the public functions listed here perform pkcs #7 operations required by mail and news applications and by some of the nss tools.
Python binding for NSS
this documentation is available via the numerous python documentation extraction tools.
modutil-tasks.html
nss security tools: modutil tasks newsgroup: mozilla.dev.tech.crypto task list the jar installation script is very fragile with respect to platform definitions (especially version numbers).
NSS_3.12.3_release_notes.html
the tar.gz or zip file expands to an nss-3.12.3 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr 4.7.4 binary distributions to get the nspr 4.7.4 header files and shared libraries, which nss 3.12.3 requires.
Installing Pork
install the pork stack pork is a set of tools written at mozilla for refactoring c++.
Renaming With Pork
these notes are based on tools pork refactoring toolchain [required].
Pork
documentation installing pork download, installation and dependency info for pork pork tools description of rewriting tools pork tool development in progress page...
Rhino Debugger
the debugger is itself a java program which you may run as java org.mozilla.javascript.tools.debugger.main [options] [filename.js] [script-arguments] where the options are the same as the shell.
Rhino documentation
javascript tools rhino shell interactive or batch execution of scripts.
Tutorial: Embedding Rhino
(note that because the java -jar option preempts the rest of the classpath, we can't use that and access the counter class.) $ java -cp "js.jar;examples" org.mozilla.javascript.tools.shell.main js> defineclass("counter") js> c = new counter(7) [object counter] js> c.count 7 js> c.count 8 js> c.count 9 js> c.resetcount() js> c.count 0 counter's constructors the zero-argument constructor is used by rhino runtime to create instances.
Rhino Examples
javascript shell shell.java is a program that executes javascript programs; it is a simplified version of the shell in the tools package.
Rhino license
license for portions of the rhino debugger additionally, some files (currently the contents of toolsrc/org/mozilla/javascript/tools/debugger/treetable/) are available under the following license: * copyright 1997, 1998 sun microsystems, inc.
How to embed the JavaScript engine
opts.setfileandline(filename, lineno); bool ok = js::evaluate(cx, opts, script, strlen(script), &rval); if (!ok) return 1; } jsstring *str = rval.tostring(); printf("%s\n", js_encodestring(cx, str)); } js_destroycontext(cx); js_shutdown(); return 0; } build and run the hello world example build command line depends on the os and the tools.
JIT Optimization Strategies
note: this page is an in-progress documentation of jit optimization strategies planned to support the "jit coach" feature intended for inclusion in firefox developer tools.
Parser API
this makes it easier to write tools in javascript that manipulate javascript source programs, such as syntax highlighters, static analyses, translators, compilers, obfuscators, etc.
SpiderMonkey 1.8.5
since this is a conservative collector, it will often find "garbage" addresses which can trigger warnings from certain code analysis tools.
SpiderMonkey 1.8.7
since this is a conservative collector, it will often find "garbage" addresses which can trigger warnings from certain code analysis tools.
SpiderMonkey: The Mozilla JavaScript runtime
spidermonkey internals: gc separate internals article on the gc spidermonkey internals: hacking tips collection of helpful tips & tools for hacking on the engine related topics javascript foss projects using or based on spidermonkey releases spidermonkey release notes current and past versions: 52, 45, 38, 31, 24, 17 community mailing list spidermonkey questions on stack overflow report a bug ...
Thread Sanitizer
unlike other tools, it understands compiler-builtin atomics and synchronization and therefore provides very accurate results with no real false positives.
Setting up an update server
then run these commands, substituting <obj dir>, <mar output path>, <version> and <channel> appropriately: ./mach package touch "<obj dir>/dist/firefox/precomplete" mar="<obj dir>/dist/host/bin/mar.exe" moz_product_version=<version> mar_channel_id=<channel> ./tools/update-packaging/make_full_update.sh <mar output path> "<obj dir>/dist/firefox" for a local build, <channel> can be default, and <version> can be the value from browser/config/version.txt (or something arbitrarily large like 2000.0a1).
How to build an XPCOM component in JavaScript
to fix this download the mozilla build tools for windows and copy the dlls from windows\bin\x86 within the zip into the bin directory of the gecko sdk.
Building the WebLock UI
the xpcom interfaces and tools you've used have been general, cross-platform, and available in the gecko runtime environment or in any gecko-based application after mozilla 1.2 (when the gre began to be used).
Using XPCOM Components
mozilla also has some tools that can find and display information about the interfaces available in gecko such as the xpcom component viewer, described below, and mxr, which is a web-based source code viewing tool.
Using XPCOM Utilities to Make Things Easier
« previousnext » this chapter goes back over the code you've already created in the first part of the tutorial (see weblock1.cpp in the previous chapter) and uses xpcom tools that make coding a lot easier and more efficient.
Creating XPCOM components
though the emphasis is on the practical steps you take to make your c++ code into a component that can be used in gecko, we hope that these steps will also give us an occasion to discuss all of the tools, techniques, and technologies that make up xpcom.
Components.utils.importGlobalProperties
example components.utils.import("resource://gre/modules/devtools/console.jsm"); components.utils.importglobalproperties(["atob", "btoa"]); var encoded = btoa("hello"); console.log(encoded); // "sgvsbg8=" console.log(atob(encoded)); // "hello" alternative methods if importglobalproperties does not support the targeted firefox version, here are some alternative methods to import these objects.
XPConnect
wrappers what sorts of wrappers xpconnect generates and uses xpconnect security membranes tools xpcshell join the xpcom community choose your preferred method for joining the discussion: mailing list newsgroup rss feed irc: #developers (learn more)tools: javascript component wizard, visual c++ component wizard, visual c++ component wizard for visual studio 2010 ...
Observer Notifications
developer tools these topics let you know about things that have happened related to firefox's built-in developer tools.
imgICache
use the following snippet to obtain a relevant image cache for a given document or channel (where relevantdocument is a document object that contains images you care about, or relevantchannel is an nsichannel that is used for fetching images): var tools = components.classes["@mozilla.org/image/tools;1"].getservice(components.interfaces.imgitools); var cache = tools.getimgcachefordocument(relevantdocument); // alternatively, tools.getimgcacheforchannel(relevantchannel) if there is no relevant document or channel, null may be passed, but this will cause any image cache requests to use the permanent storage cache (ie.
Setting HTTP request headers
(in our example, our made up http header is x-hello and not hello because we correctly added the x- in front of our name.) no longer the case: http://tools.ietf.org/html/rfc6648 notifications the question that may be coming to your mind right now is, how do you get the nsihttpchannel when an http request is made.
Performance
as of april 10, 2006, mozilla uses sqlite 3.3.4, but the latest precompiled version of the command line tools is not available for all platforms.
XPCOM ABI
to retrieve the abi of your firefox or thunderbird, open the error console (accessible through tools | error console) and evaluate the following javascript code: components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulruntime) .xpcomabi if either the cpu architecture or the c++ compiler are unknown, the application wouldn't have an xpcom abi string and attempts to get it will result in error ns_error_not_available.
XPCOM
join the xpcom community choose your preferred method for joining the discussion: mailing list newsgroup rss feed irc: #developers (learn more)tools: javascript component wizard, visual c++ component wizard, visual c++ component wizard for visual studio 2010, xpcomviewer addon: browse xpcom interfaces easily ...
XPIDL
idls make it possible to define interfaces which can then be processed by tools to autogenerate language-dependent interface specifications.
XTF
MozillaTechXTF
tools dom inspector related topics dom, xbl ...
ASan Nightly Project
moved in-tree: https://firefox-source-docs.mozilla.org/tools/sanitizer/asan_nightly.html ...
Fuzzing Interface
documentation moved in-tree: https://firefox-source-docs.mozilla.org/tools/fuzzing/fuzzing_interface.html ...
Measuring Code Coverage on Firefox
documentation moved in-tree: https://firefox-source-docs.mozilla.org/tools/code-coverage/index.html ...
Autoconfiguration in Thunderbird
current process: file a bug in bugzilla, product "webtools", component "ispdb database entries", with a configuration file that matches the requirements described below.
Building a Thunderbird extension 1: introduction
references and resources tools and helper extensions there are many tools available that help with developing thunderbird extensions.
Finding the code for a feature
there are two key tools that you need.
Thunderbird extensions
an overview of thunderbird components developer reference docs: folder classes db views (message list) message summary database mailnews protocols mailnews filters error reporting tools steel library (obsolete as of thunderbird 52, use https://github.com/protz/thunderbird-stdlib) developing new account types useful newsgroup discussions (anything that's very old should be regarded suspiciously, because there has been significant api rewrite over the past years making most techniques considerably easier) thunderbird api docs (mostly a colle...
Using the Mozilla source server
enable source server support under tools -> options.
Using the Mozilla symbol server
should list that first (note: you can replace c:\symcache\ with any writable directory on your computer, if you'd prefer a different location for downloaded symbols): srv*c:\symcache\*https://msdl.microsoft.com/download/symbols;srv*c:\symcache\*https://symbols.mozilla.org/ downloading symbols using symchk.exe you can also download the symbols using symchk.exe, part of microsoft's debugging tools for windows.
Background Tasks API - Web APIs
try it out, play with it in your browser's developer tools, and experiment with using it in your own code.
CSSPositionValue - Web APIs
#image { width: 300px; height: 300px; border: 1px solid black; background-color: #dededf; object-fit: none; } <p>check the developer tools to see the log in the console and to inspect the style attribute on the image.</p> <img id="image" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> ...
CSSStyleValue.parse() - Web APIs
the second code block shows the structure of the returned object as it would be rendered in a developer tools console.
CacheStorage - Web APIs
those that aren't using https, although this definition will likely become more complex in the future.) when testing, you can get around this by checking the "enable service workers over http (when toolbox is open)" option in the firefox devtools options/gear menu.
CanvasRenderingContext2D.lineDashOffset - Web APIs
marching ants the marching ants effect is an animation technique often found in selection tools of computer graphics programs.
Applying styles and colors - Web APIs
it is an animation technique often found in selection tools of computer graphics programs.
Optimizing canvas - Web APIs
« previousnext » the <canvas> element is one of the most widely used tools for rendering 2d graphics on the web.
Console API - Web APIs
find out about these at: google chrome devtools implementation safari devtools implementation usage is very simple — the console object — available via window.console, or workerglobalscope.console in workers; accessible using just console — contains many methods that you can call to perform rudimentary debugging tasks, generally focused around logging various values to the browser's web console.
DeprecationReportBody - Web APIs
this typically matches the message a browser will display in its devtools console when a deprecated feature is used, if one is available.
Document.registerElement() - Web APIs
the mytag variable holds a constructor that you can use to create a my-tag element in the document as follows: document.body.appendchild(new mytag()); this inserts an empty my-tag element that will be visible if you use the browser's developer tools.
Encoding API - Web APIs
interfaces textdecoder textencoder textdecoderstream textencoderstream tutorials & tools a shim allowing to use this interface in browsers that don't support it.
File and Directory Entries API - Web APIs
localfilesystemsync lockedfile provides tools to deal with a given file with all the necessary locks.
Browser storage limits and eviction criteria - Web APIs
we term them "quota clients" in this context: indexeddb asm.js caching cache api cookies note: in firefox, web storage will soon start to use the same storage management tools too, as described in this document.
InterventionReportBody - Web APIs
this typically matches the message a browser will display in its devtools console when an intervention is imposed, if one is available.
LockedFile - Web APIs
summary the lockedfile interface provides tools to deal with a given file with all the necessary locks.
Transcoding assets for Media Source Extensions - Web APIs
[0] (c) copyright 2008, blender foundation / www.bigbuckbunny.org / https://peach.blender.org/about/ tools required when working with mse, the following tools are a must have: ffmpeg — a command-line utility for transcoding your media into the required formats.
Media Source API - Web APIs
there are numerous available free and open source tools for transcoding content and preparing it for use with dash, dash file servers, and dash client libraries written in javascript.
Using Navigation Timing - Web APIs
unlike other tools or libraries, the navigation timing api lets you gather information that only the browser can provide at a level of accuracy much improved over other techniques.
Permissions API - Web APIs
the permissions api provides the tools to allow developers to implement a better user experience as far as permissions are concerned.
RTCDataChannel: error event - Web APIs
examples // strings for each of the sctp cause codes found in rfc // 4960, section 3.3.10: // https://tools.ietf.org/html/rfc4960#section-3.3.10 const sctpcausecodes = [ "no sctp error", "invalid stream identifier", "missing mandatory parameter", "stale cookie error", "sender is out of resource (i.e., memory)", "unable to resolve address", "unrecognized sctp chunk type received", "invalid mandatory parameter", "unrecognized parameters", "no user data (sctp data chunk has no data)",...
ReadableStream.cancel() - Web APIs
see devtools for details.
Server-sent events - Web APIs
living standard see also tools eventsource polyfill for node.js remy sharp’s eventsource polyfill yaffle’s eventsource polyfill rick waldron’s jquery plugin intercooler.js declarative sse support related topics ajax javascript websockets other resources a twitter like application powered by server-sent events and its code on github.
Streams API concepts - Web APIs
the streams api adds a very useful set of tools to the web platform, providing objects allowing javascript to programmatically access streams of data received over the network and process them as desired by the developer.
High-level guides - Web APIs
in addition, you'll find suggestions as to tools, libraries, and frameworks that might be helpful and compatibility information so you know which parts of the overall suite of webrtc features can be safely used given your target audience.
Taking still photos with WebRTC - Web APIs
you can play with this effect using, for example, the firefox developer tools' style editor; see edit css filters for details on how to do so.
The WebSocket API (WebSockets) - Web APIs
guides writing websocket client applications writing websocket servers writing a websocket server in c# writing a websocket server in java tools humblenet: a cross-platform networking library that works in the browser.
Starting up and shutting down a WebXR session - Web APIs
with the extension in place, you can open up a developer tools panel that lets you control the position and orientation of the headset and any hand controllers, as well as button presses on the controllers.
Web Animations API Concepts - Web APIs
it opens up the browser’s rendering engine for building animation development tools like timelines.
Using the Web Audio API - Web APIs
your use case will determine what tools you use to implement audio.
ARIA Test Cases - Accessibility
where a failure occurs we will test the browser for api incorrectness, using tools such as msaa inspect.
ARIA annotations - Accessibility
for the moment, you can see the annotations data being exposed with tools like firefox accessibility inspector.
Accessibility documentation index - Accessibility
where a failure occurs we will test the browser for api incorrectness, using tools such as msaa inspect.
Accessibility Information for Web Authors - Accessibility
color contrast analyzer algorithm is based on the formula provided in techniques for accessibility evaluation and repair tools from w3c.
Web accessibility for seizures and physical reactions - Accessibility
working draft personalization tools 1.0 working draft three flashes or below threshhold understanding sc 2.3.1 understanding wcag 2.0 (older, but contains some explanations of references made in the wcag 2.1 criteria) three flashes or below threshold understanding success criterion 2.3.1 understanding wcag 2.1 understanding success criteria 1.4.3: contrast (minimum) web accessibility initiative (wai) web animations model w3c w...
Color contrast - Accessibility
you can also check color contrast on the fly using firefox's developer tools — see our accessibility inspector guide, and in particular the section check for accessibility issues.
CSS Backgrounds and Borders - CSS: Cascading Style Sheets
border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width box-shadow tools using multiple backgrounds explains how to set one or more backgrounds on an element.
CSS Color - CSS: Cascading Style Sheets
WebCSSCSS Color
tools color picker tool this tool makes it easy to create, adjust, and experiment with custom colors.
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
with all the flex tools at your disposal you will find that most tasks can be achieved, although it might take a little bit of experimentation at first.
Block and inline layout in normal flow - CSS: Cascading Style Sheets
note: if you are not sure whether margins are collapsing, check the box model values in your browser devtools.
Variable fonts guide - CSS: Cascading Style Sheets
if your operating system is not up to date, you will not be able to use variable fonts in web pages or the firefox developer tools.
CSS Grid Layout - CSS: Cascading Style Sheets
grid layout box alignment in css grid layout css grid, logical values and writing modes css grid layout and accessibility css grid and progressive enhancement realising common layouts using css grid subgrid external resources css grid and ie11 (polyfill) examples from jen simmons grid by example - a collection of usage examples and video tutorials codrops grid reference firefox devtools css grid inspector css grid playground grid garden - a game for learning css grid specifications specification status comment css grid layout module level 2 working draft added subgrids.
Overview of CSS Shapes - CSS: Cascading Style Sheets
developer tools for shapes along with css shapes support in the browser, firefox are shipping a shape path editor in the firefox devtools.
Shapes From Images - CSS: Cascading Style Sheets
devtools can help you to identify cors errors.
CSS Shapes - CSS: Cascading Style Sheets
reference properties shape-image-threshold shape-margin shape-outside data types <basic-shape> guides overview of css shapes shapes from box values basic shapes shapes from images edit shape paths in css — firefox developer tools external resources a list of css shapes resources css shapes 101 creating non-rectangular layouts with css shapes how to use css shapes in your web design how to get started with css shapes what i learned in one weekend with css shapes css vs.
font-variation-settings - CSS: Cascading Style Sheets
if your operating system is not up to date, you will not be able to use variable fonts in web pages or the firefox developer tools.
Ajax - Developer guides
WebGuideAJAX
tools axios promise based http client, which uses xmlhttprequest internally.
Audio and Video Delivery - Developer guides
your files have been encoded incorrectly your files may have been encoded incorrectly — try encoding using one of the following tools, which are proven to be pretty reliable: audacity — free audio editor and recorder miro — free, open-source music and video player handbrake — open source video transcoder firefogg — video and audio encoding for firefox ffmpeg2 — comprehensive command line encoder libav — comprehensive command line encoder vid.ly — video player,transcoding and delivery internet archive —...
HTML5 - Developer guides
WebGuideHTMLHTML5
html5 reference guide quick-reference html5 sheet containing markup generators, code examples and web developer tools.
Using HTML sections and outlines - Developer guides
many accessibility tools as well as reader views provided by some browsers rely on semantic sectioning elements.
Mobile Web Development - Developer guides
WebGuideMobile
using tools like css lint can help find problems like this in code, and preprocessors like sass and less can help you to produce cross-browser code.
The Web Open Font Format (WOFF) - Developer guides
WebGuideWOFF
tools for working with woff fonts tools for working with woff fonts are available.
<blockquote>: The Block Quotation element - HTML: Hypertext Markup Language
<blockquote cite="https://tools.ietf.org/html/rfc1149"> <p>avian carriers can provide high delay, low throughput, and low altitude service.
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
WebHTMLElementcanvas
canvas content is not exposed to accessibility tools as semantic html is.
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
234 microformats composing, html, microformats, needscontent, needsmarkupwork, reference, seo, search microformats (sometimes abbreviated μf) are standards used to embed semantics & structured data in html, and provide an api to be used by search engines, aggregators, and other tools.
Microformats - HTML: Hypertext Markup Language
summary microformats (sometimes abbreviated μf) are standards used to embed semantics & structured data in html, and provide an api to be used by search engines, aggregators, and other tools.
HTML: Hypertext Markup Language
WebHTML
includes examples, links to palette-building tools, and more.
Browser detection using the user agent - HTTP
never be satisfied with your webpage until you can open up the dev tools side panel and resize the screen while the webpage looks smooth, fluid, and dynamically resized.
CORS errors - HTTP
WebHTTPCORSErrors
these steps may help you do so: navigate to the web site or web app in question and open the developer tools.
Configuring servers for Ogg media - HTTP
getting the duration of ogg media you can use the oggz-info tool to get the media duration; this tool is included with the oggz-tools package.
Using HTTP cookies - HTTP
WebHTTPCookies
to see stored cookies (and other storage that a web page can use), you can enable the storage inspector in developer tools and select cookies from the storage tree.
Index - HTTP
WebHTTPHeadersIndex
database read/write, cpu time, file system access, etc.) in the developer tools in the user's browser or in the performanceservertiming interface.
HTTP Index - HTTP
WebHTTPIndex
database read/write, cpu time, file system access, etc.) in the developer tools in the user's browser or in the performanceservertiming interface.
304 Not Modified - HTTP
WebHTTPStatus304
many developer tools' network panels of browsers create extraneous requests leading to 304 responses, so that access to the local cache is visible to developers.
Regular expressions - JavaScript
<button onclick="testinfo(document.getelementbyid('phone'));">check</button> </form> javascript var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/; function testinfo(phoneinput) { var ok = re.exec(phoneinput.value); if (!ok) { console.error(phoneinput.value + ' isn\'t a phone number with area code!'); } else { console.log('thanks, your phone number is ' + ok[0]);} } result tools regexr an online tool to learn, build, & test regular expressions.
Using Promises - JavaScript
promise.all() and promise.race() are two composition tools for running asynchronous operations in parallel.
JavaScript Guide - JavaScript
chapters this guide is divided into several chapters: introduction about this guide about javascript javascript and java ecmascript tools hello world grammar and types basic syntax & comments declarations variable scope variable hoisting data structures and types literals control flow and error handling if...else switch try/catch/throw error objects loops and iteration for while do...while break/continue for..in for..of functions defining functions calling functions function scope closures arguments & param...
Memory Management - JavaScript
node.js node.js offers additional options and tools for configuring and debugging memory issues that may not be available for javascript executed within a browser environment.
Error.prototype.fileName - JavaScript
if called from a debugger context, the firefox developer tools for example, "debugger eval code" is returned.
Function.name - JavaScript
these tools are often used as part of a javascript build pipeline to reduce the size of a program prior to deploying it to production.
Lexical grammar - JavaScript
minification tools are often used to remove whitespace in order to reduce the amount of data that needs to be transferred.
Destructuring assignment - JavaScript
nested object and array destructuring const metadata = { title: 'scratchpad', translations: [ { locale: 'de', localization_tags: [], last_edit: '2014-04-14t08:43:37', url: '/de/docs/tools/scratchpad', title: 'javascript-umgebung' } ], url: '/docs/tools/scratchpad' }; let { title: englishtitle, // rename translations: [ { title: localetitle, // rename }, ], } = metadata; console.log(englishtitle); // "scratchpad" console.log(localetitle); // "javascript-umgebung" for of iteration and destructuring const people = [ { name: 'mike smith', ...
import - JavaScript
the static form is preferable for loading initial dependencies, and can benefit more readily from static analysis tools and tree shaking.
Digital audio concepts - Web media technologies
as a result, audio data is difficult to compress using traditional algorithms such as those used by generral-purpose tools like zip, which usually work by replacing repeating sequences of data with a shorthand representation.
Using images in HTML - Web media technologies
WebMediaimages
learn html: responsive images in this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools html provides to help implement them.
OpenSearch description format
then, logging information will appear in firefox's error console (tools ⟩ error console) when search plugins are added.
CSS and JavaScript animation performance - Web Performance
enabling fps tools before going through the example, please enable fps tools first to see the current frame rate: in the url bar, enter about:config; click the i’ll be careful, i promise!
Privacy, permissions, and information security
this is the technology behind the https (hypertext transport protocol secured) protocol not all of these are generally directly used within code; notably, the permissions api, feature policy, and the allow attribute on <iframe> elements are primary tools directly used by code to help secure a site and its content.
Introduction to progressive web apps - Progressive web apps (PWAs)
in addition, there are tools to measure how complete (as a percentage) a web app is, such as lighthouse.
Progressive loading - Progressive web apps (PWAs)
first of all, you should use tools or services similar to tinypng, which will reduce the file size of your images without altering the quality too much.
Mobile first - Progressive web apps (PWAs)
try it out with tools > web developer > responsive design view.
Clipping and masking - SVG: Scalable Vector Graphics
using well-known css techniques one of the most powerful tools in a web developer's toolbox is display: none.
Other content in SVG - SVG: Scalable Vector Graphics
this means, that you can use clips, masks, filters, rotations and all other tools of svg on the content: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> <image x="90" y="-65" width="128" height="146" transform="rotate(45)" xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/> </svg> screenshotlive sample embedding arbitrary xml since svg is an xml application, you ...
Paths - SVG: Scalable Vector Graphics
WebSVGTutorialPaths
you might have already gained practical experience with bézier curves using path tools in inkscape, illustrator or photoshop.
SVG Filters Tutorial - SVG: Scalable Vector Graphics
filters svg allows us to use similar tools as the bitmap description language such as the use of shadow, blur effects or even merging the results of different filters.
SVG fonts - SVG: Scalable Vector Graphics
other tools however like the adobe svg viewer plugin, batik and parts of inkscape support svg font embedding.
SVG Tutorial - SVG: Scalable Vector Graphics
WebSVGTutorial
introducing svg from scratch introduction getting started positions basic shapes paths fills and strokes gradients patterns texts basic transformations clipping and masking other content in svg filter effects svg fonts svg image tag tools for svg svg and css the following topics are more advanced and hence should get their own tutorials.
mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
in firefox, go to tools > options...
SVG: Scalable Vector Graphics
WebSVG
mailing list newsgroup rss feed tools svg test suite markup validator more tools...
How to fix a website with blocked mixed content - Web security
there are online as well as offline tools (depending on your operating system) such as linkchecker to help resolve this.
Subresource Integrity - Web security
tools for generating sri hashes you can generate sri hashes from the command-line with openssl using a command invocation such as this: cat filename.js | openssl dgst -sha384 -binary | openssl base64 -a or with shasum using a command invocation such as this: shasum -b -a 384 filename.js | awk '{ print $1 }' | xxd -r -p | base64 notes: the pipe-through-xxd step takes the hexadecimal output fro...
XPath
tools chropath xpath panel that integrates tightly into firebug, providing an editor and inspector (firefox add-on).
Compiling from Rust to WebAssembly - WebAssembly
many people use npm packages through various bundler tools, and we'll be using one of them, webpack, in this tutorial.
Understanding WebAssembly text format - WebAssembly
this is an intermediate form designed to be exposed in text editors, browser developer tools, etc.
WebAssembly
this is the low-level textual representation of a .wasm module shown in browser developer tools when debugging.