Search completed in 1.06 seconds.
DevTools API - Firefox Developer Tools
warning: the dev
tools api is still wip.
... if you notice any inconsistency, please let the firefox developer
tools team know.
... introduction the dev
tools 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 dev
tools 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, dev
tools, 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 dev
tools, and how to debug the browser as a whole.
... if you have any feedback on dev
tools, or want to contribute to the project, you can join the dev
tools 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 dev
tools.
...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 dev
tools.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 dev
tools.
... 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 dev
tools.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 dev
tools.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
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
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 dev
tools.
... 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 "dev
tools") 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 dev
tools 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
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 dev
tools 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 dev
tools.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: dev
tools.inspector.split-rule-enabled — this switches 3-pane mode on and off.
... dev
tools.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: dev
tools.inspector.three-pane-enabled dev
tools.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 dev
tools.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/dev
tools/webconsole folder.
... the webconsoleclient lives in webconsoleclient.jsm (in toolkit/dev
tools/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/dev
tools/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 dev
tools 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 dev
tools application panel.
... the firefox dev
tools’ 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/dev
tools/debugger.xul): window.addeventlistener("debugger:editorloaded") - called when the read-only script panel loaded.
... window.addeventlistener("debugger:editorunloaded") relevant files: chrome://browser/content/dev
tools/debugger-controller.js chrome://browser/content/dev
tools/debugger-toolbar.js chrome://browser/content/dev
tools/debugger-view.js chrome://browser/content/dev
tools/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 dev
tools 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 dev
tools.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 dev
tools.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 dev
tools.
CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
the flexbox inspector allows you to examine css flexbox layouts using the firefox dev
tools, 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 dev
tools 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 dev
tools.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 dev
tools.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 dev
tools, 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 dev
tools 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.
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
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/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
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 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.
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/dev
tools-examples/sourcemaps-in-console/index.html.
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.
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.
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/dev
tools-examples/whitespace-only-demo/index.html.
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.
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.
Allocations - Firefox Developer Tools
if you click this link, the dev
tools 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.
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 dev
tools 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 dev
tools are, and how to do simple inspection and editing of css.
... how to access browser dev
tools 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
dev
tools' 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 dev
tools 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
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 dev
tools performance panel.
...in addition to profiler.firefox.com, the firefox dev
tools 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 dev
tools.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="dev
toolsendseparator"> <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 dev
tools for debugging html, css, and other web code.
...And 4 more matches
React resources - Learn web development
react dev
tools 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 dev
tools 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 "dev
tools") 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 dev
tools.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 dev
tools, 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 dev
tools 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
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 setup
tools (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 setup
tools.
... using virtualenv once you have virtualenv installed, you can make virtual environments: > virtualenv tmp new python executable in tmp/bin/python installing setup
tools............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,dev
toolsseparator").
...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
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: configuresec
toolstarted - 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: dev
tools.debugger.remote-enabled = true you may also want to set these optional preferences: dev
tools.debugger.force-local = false (if you want to connect from a different machine over the network) dev
tools.debugger.remote-host (to change the tcp hostname where firefox will listen for connections) dev
tools.debugger.remote-port (to change the tcp port number where firefox will listen for connections...
...) dev
tools.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 xcode
tools.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 dev
tools.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
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: // dev
tools/gcli -> resource:///modules/dev
tools/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: // dev
tools/gcli -> resource:///modules/dev
tools/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 :) "dev
tools/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('dev
tools/gcli', mapping); // => resource:///modules/dev
tools/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 dev
tools'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, moo
tools 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 "dev
tools.editor.component" a string indicating the name of the source editor engine to use; this is "orion" by default.
... sourceeditor.prefs.expand_tab "dev
tools.editor.expandtab" a boolean value that indicates whether or not to automatically expand tabs out to a series of spaces.
... sourceeditor.prefs.tab_size "dev
tools.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/commandline
tools/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 win
tools.zip archive.
... note: win
tools.zip seems old and lots of newer mdc documentation refers to moz
tools.zip archive, but the version of xpidl.exe that comes with the gecko-sdk crashes with the dll’s from moz
tools.
... 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 win
tools.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
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&..." /> <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 dev
tools server from xul apps.
...add the following code to your xul app: components.utils.import('resource://gre/modules/dev
tools/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/dev
tools/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("dev
tools.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 dev
tools: 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 dev
tools 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 dev
tools 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 dev
tools 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 dev
tools javascript and/or html/css contribute to dev
tools 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 dev
tools/client $ mach build webconsole # rebuild only the files in the dev
tools/client/webconsole directory $ mach mochitest webconsole/test # run mochitests in dev
tools/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\build
tools\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 dev
tools 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
xpc
tools 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-xpc
tools 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 nsixpc
toolsprofiler.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 dev
tools specific the "rules" view of the style inspector has been updated.
... cssruleviewchanged dev
tools specific the "rules" view of the style inspector has been changed.
... cssruleviewcsslinkclicked dev
tools 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
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 dev
tools, 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, dev
tools, 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 dev
tools 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.
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,dev
toolsseparator"> <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/merge
tools.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 dev
tools.errorconsole.enabled preference to true.
...in firefox, the error console can be opened from the
tools menu or by ctrl-shift-j.
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 #websec
tools 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.
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 / web
tools 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 / web
tools 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.
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 dev
tools 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 dev
tools 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 dev
tools, 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 dev
tools is very useful for working out where these breakpoints should go.
...if we view the layout in responsive design mode in dev
tools 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 dev
tools.
...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 dev
tools 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 dev
tools 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 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 dev
tools, then choose application > service workers, then check the offline checkbox if you are using chrome.
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 dev
tools' console).
...we want you to rewrite the greeting() method so that it logs "hello, said bertie the cymric." to the browser dev
tools' console, but in a way that will work across any cat object of the same structure, regardless of its name or breed.
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 dev
tools 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 dev
tools 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 dev
tools 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 dev
tools.
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
-dev
tools 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 dev
tools.
... 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/dev
tools/server/actors/webconsole.js:1069:7 wca_onevaluatejs@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/dev
tools/server/actors/webconsole.js:734:9 dsc_onpacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/dev
tools/server/main.js:1098:9 ldt_send/<@resource://gre/modules/dev
tools/dbg-client.jsm -> resource://gre/modules/dev
tools/server/transpor...
...t.js:279:11 makeinfallible/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/dev
tools/dev
toolsutils.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
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 setup
tools 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 dev
tools have supported highlighting text nodes since version 52, making it easier to see exactly what nodes whitespace characters are contained within.
... the firefox dev
tools 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.
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
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
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 dev
tools, and edge dev
tools.) 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
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.
window/utils - Archive of obsolete content
in particular: null: get all window types navigator:browser: get "normal" browser windows dev
tools: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.
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.
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 ...
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...
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.
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.
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 ...
jspage - Archive of obsolete content
var moo
tools={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 ...
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_webmaster
tools.webapp grandcentral inbox: grandc.webapp (note: grandcentral requires the flash plugin.
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 moz
tools position glib_prefix=$home/moz
tools libidl_prefix=$home/moz
tools #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.
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 ...
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.
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 dev
tools: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.
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.
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 dev
tools: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 dev
tools: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.
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-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.
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
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
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 ...
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...
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.
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).
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...
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.
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 dev
tools 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.
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.
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.
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).
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.
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 ...
CSUN Firefox Materials
extensions can easily be installed or removed with the extension manager in the
tools menu.
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-web
tools@lists.mozilla.org developers dev-apps-web
tools@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_xpc
tools 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.
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:dev
tools 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...
Using the Browser API
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 dev
tools.
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 dev
tools 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/dev
tools/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 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.
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!
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.
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 mx
tools package from softlights http://www.softlights.net/projects/mx
tools/uhura.html signontheline - an extension to mccoy - important: you have to checkout rev 222, later revisions are not working in mccoy!
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 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
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++.
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.
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).
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/dev
tools/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.imgi
tools); 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
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 ...
Autoconfiguration in Thunderbird
current process: file a bug in bugzilla, product "web
tools", component "ispdb database entries", with a configuration file that matches the requirements described below.
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 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.
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"/> ...
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 dev
tools options/gear menu.
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 dev
tools implementation safari dev
tools 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 dev
tools 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.
InterventionReportBody - Web APIs
this typically matches the message a browser will display in its dev
tools 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)",...
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.
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.
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 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 dev
tools 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.
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.
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
html5 reference guide quick-reference html5 sheet containing markup generators, code examples and web developer
tools.
HTML documentation index - HTML: Hypertext Markup Language
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.
CORS errors - HTTP
these steps may help you do so: navigate to the web site or web app in question and open the developer
tools.
Using HTTP cookies - HTTP
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
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
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
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.
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
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.
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.
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 ...
SVG Tutorial - SVG: Scalable Vector Graphics
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.
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).
WebAssembly
this is the low-level textual representation of a .wasm module shown in browser developer
tools when debugging.