From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/ar/tools/browser_console/index.html | 181 ++++++++ files/ar/tools/index.html | 209 +++++++++ files/ar/tools/page_inspector/how_to/index.html | 13 + files/ar/tools/page_inspector/index.html | 65 +++ files/ar/tools/scratchpad/index.html | 96 +++++ files/ar/tools/storage_inspector/index.html | 112 +++++ files/ar/tools/web_console/index.html | 45 ++ .../the_command_line_interpreter/index.html | 185 ++++++++ files/ar/tools/webide/index.html | 467 +++++++++++++++++++++ files/ar/tools/webide/troubleshooting/index.html | 107 +++++ 10 files changed, 1480 insertions(+) create mode 100644 files/ar/tools/browser_console/index.html create mode 100644 files/ar/tools/index.html create mode 100644 files/ar/tools/page_inspector/how_to/index.html create mode 100644 files/ar/tools/page_inspector/index.html create mode 100644 files/ar/tools/scratchpad/index.html create mode 100644 files/ar/tools/storage_inspector/index.html create mode 100644 files/ar/tools/web_console/index.html create mode 100644 files/ar/tools/web_console/the_command_line_interpreter/index.html create mode 100644 files/ar/tools/webide/index.html create mode 100644 files/ar/tools/webide/troubleshooting/index.html (limited to 'files/ar/tools') diff --git a/files/ar/tools/browser_console/index.html b/files/ar/tools/browser_console/index.html new file mode 100644 index 0000000000..81a9a8d321 --- /dev/null +++ b/files/ar/tools/browser_console/index.html @@ -0,0 +1,181 @@ +--- +title: Browser Console +slug: Tools/Browser_Console +translation_of: Tools/Browser_Console +--- +

{{ToolsSidebar}}

+ +

The Browser Console is like the Web Console, but applied to the whole browser rather than a single content tab.

+ +

So it logs the same sorts of information as the Web Console - network requests, JavaScript, CSS, and security errors and warnings, and messages explicitly logged by JavaScript code. However, rather than logging this information for a single content tab, it logs information for all content tabs, for add-ons, and for the browser's own code.

+ +

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.

+ +

Similarly, you can execute JavaScript expressions using the Browser Console. But while the Web Console executes code in the page window scope, the Browser Console executes them in the scope of the browser's chrome window. This means you can interact with all the browser's tabs using the gBrowser global, and even with the XUL used to specify the browser's user interface.

+ +
+

NB: The Browser Console command line (to execute JavaScript expressions) is disabled by default. To enable it set the devtools.chrome.enabled preference to true in about:config, or set the "Enable browser {{Glossary("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:

+ +
    +
  1. 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).
    2. +
  2. from the keyboard: press Ctrl+Shift+J (or Cmd+Shift+J on a Mac).
    3. +
+ +

You can also start the Browser Console by launching Firefox from the command line and passing the -jsconsole argument:

+ +
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
+ +

The Browser Console looks like this:

+ +

+ +

You can see that the Browser Console looks and behaves very much like the Web Console:

+ + + +

Beginning with Firefox 68, the Browser Console allows you to show or hide messages from the content process (i.e. the messages from scripts in all the opened pages) by setting or clearing the checkbox labeled Show Content Messages. The following image shows the browser console focused on the same page as above after clicking on the Show Content Messages checkbox.

+ +

+ +

Browser Console logging

+ +

The Browser console logs the same sorts of messages as the Web Console:

+ + + +

However, it displays such messages from:

+ + + +

Messages from add-ons

+ +

The Browser Console displays messages logged by all Firefox add-ons.

+ +

Console.jsm

+ +

To use the console API from a traditional or bootstrapped add-on, get it from the Console module.

+ +

One exported symbol from Console.jsm is "console". Below is an example of how to access it, which adds a message to the Browser Console.

+ +
Components.utils.import("resource://gre/modules/Console.jsm");
+console.log("Hello from Firefox code"); //output messages to the console
+ +

Learn more:

+ + + +

HUDService

+ +

There is also the HUDService which allows access to the Browse Console. The module is available at Mozilla DXR. We see we can not only access the Browser Console but also Web Console.

+ +

Here is an example on how to clear the contents of the Browser console:

+ +
Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+hud.jsterm.clearOutput(true);
+ +

If you would like to access the content document of the Browser Console this can be done with the HUDService. This example here makes it so that when you mouse over the "Clear" button it will clear the Browser Console:

+ +
Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+
+var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
+clearBtn.addEventListener('mouseover', function() {
+  hud.jsterm.clearOutput(true);
+}, false);
+ +

Bonus Features Available

+ +

For Add-on SDK add-ons, the console API is available automatically. Here's an example add-on that just logs an error when the user clicks a widget:

+ +
widget = require("sdk/widget").Widget({
+  id: "an-error-happened",
+  label: "Error!",
+  width: 40,
+  content: "Error!",
+  onClick: logError
+});
+
+function logError() {
+  console.error("something went wrong!");
+}
+ +

If you build this as an XPI file, then open the Browser Console, then open the XPI file in Firefox and install it, you'll see a widget labeled "Error!" in the Add-on bar:

+ +

Click the icon. You'll see output like this in the Browser Console:

+ +

+ +

For Add-on SDK-based add-ons only, the message is prefixed with the name of the add-on ("log-error"), making it easy to find all messages from this add-on using the "Filter output" search box. By default, only error messages are logged to the console, although you can change this in the browser's preferences.

+ +

Browser Console command line

+ +
+

The Browser Console command line is disabled by default. To enable it set the devtools.chrome.enabled preference to true in about:config, or set the "Enable chrome debugging" option in the developer tool settings.

+
+ +

Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:Also like the Web Console's command line interpreter, this command line supports autocomplete, history, and various keyboard shortcuts and helper commands. If the result of a command is an object, you can click on the object to see its details.

+ +

But while the Web Console executes code in the scope of the content window it's attached to, the browser console executes code in the scope of the chrome window of the browser. You can confirm this by evaluating window:

+ +

+ +

This means you can control the browser: opening, closing tabs and windows and changing the content that they host, and modify the browser's UI by creating, changing and removing XUL elements.

+ +

Controlling the browser

+ +

The command line interpreter gets access to the tabbrowser object, through the gBrowser global, and that enables you to control the browser through the command line. Try running this code in the Browser Console's command line (remember that to send multiple lines to the Browser Console, use Shift+Enter):

+ +
var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+newTabBrowser.addEventListener("load", function() {
+  newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>";
+}, true);
+newTabBrowser.contentDocument.location.href = "https://mozilla.org/";
+ +

It adds a listener to the currently selected tab's load event that will eat the new page, then loads a new page.

+ +
+

Note: You can restart the browser with the command Ctrl + Alt + R (Windows, Linux) or Cmd + Alt + R (Mac) This command restarts the browser with the same tabs open as before the restart.

+
+ +

Modifying the browser UI

+ +

Since the global window object is the browser's chrome window, you can also modify the browser's user interface. On Windows, the following code will add a new item to the browser's main menu:

+ +
var parent = window.document.getElementById("appmenuPrimaryPane");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);
+ +

On macOS, this similar code will add a new item to the "Tools" menu:

+ +
var parent = window.document.getElementById("menu_ToolsPopup");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);
+ +

diff --git a/files/ar/tools/index.html b/files/ar/tools/index.html new file mode 100644 index 0000000000..7fe4951617 --- /dev/null +++ b/files/ar/tools/index.html @@ -0,0 +1,209 @@ +--- +title: أدوات مطور فايرفوكس +slug: Tools +translation_of: Tools +--- +
{{ToolsSidebar}}
+ +

Examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile.

+ +

If you are looking for information on using the web developer tools available in Firefox, you've come to the right place — this page provides links to detailed information on all of the core tools and additional tools, and further information such as how to connect to and debug Firefox for Android, how to extend the devtools, and how to debug the browser as a whole.

+ +

Please explore the links found in the sidebar, and further down the page. If you have any feedback or questions about the devtools, send us messages on our mailing list or IRC channel (see the community links near the bottom of the page). If you have any feedback or questions specifically about the documentation, the MDN discourse is a good place to post.

+ +
+

Note: If you are just getting started with web development and using developer tools, our learning web development docs will help you — see Getting started with the Web and What are browser developer tools? for good starting points.

+
+ +

The Core Tools

+ +

You can open the Firefox Developer Tools from the menu by selecting Tools > Web Developer > Toggle Tools or use the keyboard shortcut Ctrl + Shift + I or F12 on Windows and Linux, or Cmd + Opt + I on macOS.

+ +

The ellipsis menu on the right-hand side of Developer Tools, contains several commands that let you perform actions or change tool settings.

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
This button only appears when there are multiple iframes on a page. Click it to display a list of the iframes on the current page and select the one with which you want to work.
Click this button to take a screenshot of the current page. (Note: This feature is not turned on by default and must be enabled in settings before the icon will appear.)
Toggles Responsive Design Mode.
Opens the menu that includes docking options, the ability to show or hide the split console, and Developer Tools settings. The menu also includes links to the documentation for Firefox Web Tools and the Mozilla Community.
Closes the Developer Tools
+ +
+
+

Page Inspector

+ +

The all-new Inspector panel in Firefox 57.

+ +

View and edit page content and layout. Visualise many aspects of the page including the box model, animations, and grid layouts.

+
+ +
+

Web Console

+ +

The all-new Console in Firefox 57.

+ +

See messages logged by a web page and interact with the page using JavaScript.

+
+
+ +
+
+

JavaScript Debugger

+ +

The all-new Firefox 57 Debugger.html

+ +

Stop, step through, examine, and modify the JavaScript running in a page.

+
+ +
+

Network Monitor

+ +

The Network panel in Firefox 57 DevTools.

+ +

See the network requests made when a page is loaded.

+
+
+ +
+
+

Performance Tools

+ +

Performance Tools in Firefox 57 Developer Tools

+ +

Analyze your site's general responsiveness, JavaScript, and layout performance.

+
+ +
+

Responsive Design Mode

+ +

Responsive Design mode in Firefox 57.

+ +

See how your website or app will look and behave on different devices and network types.

+
+
+ +
+
+

Accessibility inspector

+ +

Performance Tools in Firefox 57 Developer Tools

+ +

Provides a means to access the page's accessibility tree, allowing you to check what's missing or otherwise needs attention.

+
+ +
+
+ +
+

Note: The collective term for the UI inside which the DevTools all live is the Toolbox.

+
+ +

More Tools

+ +

These developer tools are also built into Firefox. Unlike the "Core Tools" above, you might not use them every day.

+ +
+
+
Memory
+
Figure out which objects are keeping memory in use.
+
Storage Inspector
+
Inspect cookies, local storage, indexedDB, and session storage present in a page.
+
DOM Property Viewer
+
Inspect the page's DOM properties, functions, etc.
+
Eyedropper
+
Select a color from the page.
+
Scratchpad
+
A text editor built into Firefox that lets you write and execute JavaScript.
+
Style Editor
+
View and edit CSS styles for the current page.
+
Taking screenshots
+
Take a screenshot of the entire page or of a single element.
+
Measure a portion of the page
+
Measure a specific area of a web page.
+
Rulers
+
Overlay horizontal and vertical rulers on a web page
+
+
+ +
+
+

+ +

For the latest developer tools and features, try Firefox Developer Edition.

+ +

Download Firefox Developer Edition

+
+ +
+
+ +

Connecting the Developer Tools

+ +

If you open the developer tools using keyboard shortcuts or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.

+ +
+
+
about:debugging
+
Debug add-ons, content tabs, and workers running in the browser.
+
Connecting to Firefox for Android
+
Connect the developer tools to an instance of Firefox running on an Android device.
+
Connecting to iframes
+
Connect the developer tools to a specific iframe in the current page.
+
Connecting to other browsers
+
Connect the developer tools to Chrome on Android and Safari on iOS.
+
+
+ +

Debugging the browser

+ +

By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.

+ +
+
+
Browser Console
+
See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.
+
Browser Toolbox
+
Attach the Developer Tools to the browser itself.
+
+
+ +

Extending the devtools

+ +

For information on extending the Firefox DevTools, see Extending the developer tools over in the Browser Extensions section of MDN.

+ +

Migrating from Firebug

+ +

Firebug has come to the end of its lifespan (see Firebug lives on in Firefox DevTools for details of why), and we appreciate that some people will find migrating to another less familiar set of DevTools to be challenging. To ease a transition from Firebug to the Firefox developer tools, we have written a handy guide — Migrating from Firebug.

+ +

Contribute

+ +

If you want to help improve the developer tools, these resources will get you started.

+ +
+
+
Get Involved
+
Our developer documentation explains how to get involved.
+
bugs.firefox-dev.tools
+
A tool helping to find bugs to work on.
+
+
diff --git a/files/ar/tools/page_inspector/how_to/index.html b/files/ar/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..2f18038ec9 --- /dev/null +++ b/files/ar/tools/page_inspector/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: How to +slug: Tools/Page_Inspector/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Page_Inspector/How_to +--- +
{{ToolsSidebar}}

Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.

+ +

{{ ListSubpages () }}

+ +

 

diff --git a/files/ar/tools/page_inspector/index.html b/files/ar/tools/page_inspector/index.html new file mode 100644 index 0000000000..518af28f10 --- /dev/null +++ b/files/ar/tools/page_inspector/index.html @@ -0,0 +1,65 @@ +--- +title: Page Inspector +slug: Tools/Page_Inspector +tags: + - CSS + - DOM + - HTML + - NeedsTranslation + - Stylesheets + - TopicStub + - Web Development + - 'Web Development:Tools' + - 'l10n:priority' +translation_of: Tools/Page_Inspector +--- +
{{ToolsSidebar}}
+ +

Use the Page Inspector to examine and modify the HTML and CSS of a page.

+ +

You can examine pages loaded in the local copy of Firefox or in a remote target such as Firefox for Android. See remote debugging to learn how to connect the developer tools to a remote target.

+ +
+

User Interface Tour

+ +

To find your way around the Inspector, here's a quick tour of the UI.

+ +

You can split the Rules view out into its own pane, separate from the other tabs on the CSS pane — this is called 3-pane mode.

+ +
+

How to

+ +

To find out what you can do with the Inspector, see the following how to guides:

+ +
+ +
+ +
+

Reference

+ +
+ +
diff --git a/files/ar/tools/scratchpad/index.html b/files/ar/tools/scratchpad/index.html new file mode 100644 index 0000000000..b76f2da78c --- /dev/null +++ b/files/ar/tools/scratchpad/index.html @@ -0,0 +1,96 @@ +--- +title: Scratchpad +slug: Tools/Scratchpad +translation_of: Archive/Tools/Scratchpad +--- +

تقدم المسودة بيئة لتجريب شفرة جافا سكريبت. يمكنك كتابة، تشغيل، وفحص النتائج من التعليمات البرمجية التي تتفاعل مع صفحة الويب.

+ +

على عكس وحدة تحكم ويب، الذي تم تصميمه لتفسير سطر واحد من التعليمات البرمجية في وقت واحد، يتيح لك تطبيق المسودة تعديل قطع أكبر من شفرة جافا سكريبت، ثم تنفيذه بطرق مختلفة اعتمادا على الطريقة التي تريد استخدام الإخراج.

+ +

{{EmbedYouTube ("Pt7DZACyClM ')}}

+ +

استعمال

+ +

المسودة افتتاح

+ +

لفتح نافذة المسودة، اضغط شيفت + F4، أو انتقل إلى القائمة مطور ويب (وهو الفرعية في القائمة أدوات على OS X و Linux)، ثم حدد المسودة. هذا وسوف تفتح نافذة محرر المسودة، والذي يتضمن التعليق الذي يوفر بعض معلومات موجزة عن كيفية استخدام تطبيق المسودة. من هناك يمكنك أن تبدأ على الفور كتابة بعض شفرة جافا سكريبت لمحاولة.

+ +

التحرير

+ +

نافذة المسودة يبدو شيئا من هذا القبيل (على OS X شريط القوائم في الجزء العلوي من الشاشة):

+ +

لقطة من المسودة

+ +

من القائمة ملف يوفر خيارات لحفظ وتحميل جافا سكريبت مقتطفات الشفرة، حتى تتمكن من إعادة استخدام التعليمات البرمجية في وقت لاحق إذا أردت.

+ +

إنجاز قانون وثائق مضمنة

+ +
+

إنجاز قانون ونوع المعلومات غير متاح إلا من فايرفوكس 32 وما بعده.

+
+ +

من فايرفوكس 32 فصاعدا المسودة يدمج محرك تحليل رمز الخرشنة، ويستخدم ذلك لتقديم اقتراحات الإكمال التلقائي والنوافذ المنبثقة التي تحتوي على معلومات عن الرمز الحالي. لإدراج اقتراحات الإكمال التلقائي، اضغط على Ctrl + الفضاء. لإظهار المنبثقة، اضغط شيفت + الفضاء في فايرفوكس 32 أو السيطرة + التحول + الفضاء في فايرفوكس 33+.

+ +

على سبيل المثال، حاول كتابة D، ثم الضغط على Ctrl + الفضاء. سترى هذا:

+ +

الرمز الموجود بجانب كل اقتراح إلى نوع، واقتراح المميز حاليا يحصل منبثقة مع مزيد من المعلومات. ↑ و↓ دورة من خلال الاقتراحات وأدخل أو تبويب حدد خيار تسليط الضوء عليها.

+ +

إذا قمت بتحديد المستند، ثم addEventListener، ثم اضغط على التحول  + الفضاء سترى المنبثقة التي تظهر ملخصا لتركيب وظيفة وصفا موجزا:

+ +

و"[مستندات]" وصلة يأخذك إلى وثائق MDN للرمز.

+ +

تنفيذ

+ +

بمجرد كتابة التعليمات البرمجية الخاصة بك، حدد الرمز الذي تريد تشغيله. إذا لم تقم بتحديد أي شيء، سيتم تشغيل كافة التعليمات البرمجية في الإطار. ثم اختيار الطريقة التي تريد رمز لتشغيل باستخدام أزرار على طول الجزء العلوي، وذلك باستخدام القائمة تنفيذ، أو باستخدام قائمة السياق. يتم تنفيذ التعليمات البرمجية في نطاق التبويب المحدد حاليا. ستضاف أية متغيرات قمت بتعريف خارج وظيفة إلى وجوه العالمي لعلامة التبويب هذه.

+ +

هناك أربعة خيارات التنفيذ المتاحة.

+ +

اركض

+ +

عند اختيار خيار تشغيل، يتم تنفيذ التعليمات البرمجية المحددة. هذا هو ما كنت تستخدم لتنفيذ وظيفة أو رمز الأخرى التي تعالج محتوى الصفحة الخاصة بك دون الحاجة لمعرفة النتيجة.

+ +

فحص

+ +

الخيار فحص تنفيذ التعليمات البرمجية تماما مثل الخيار تشغيل. ومع ذلك، بعد بإرجاع رمز، يتم فتح مفتش الكائن لتمكنك من دراسة القيمة التي تم إرجاعها.

+ +

على سبيل المثال، إذا قمت بإدخال رمز:

+ +
نافذة
+
+ +

ثم اختر فحص، يظهر مفتش الكائن ويبدو أن شيئا من هذا القبيل:

+ +

تفتيش كائن في المسودة

+ +

عرض

+ +

خيار عرض تنفيذ التعليمات البرمجية المحددة، ثم إدراج نتيجة مباشرة إلى حسابك في المسودة محرر نافذة كتعليق، لذلك يمكنك استخدامه بمثابة REPL.

+ +

تحديث وتشغيل

+ +

متوفر فقط في القائمة تنفيذ خيار تحديث وتشغيل. لأول مرة تعيد تحميل الصفحة، ثم تنفيذ التعليمات البرمجية عند "تحميل" وقع الحدث الصفحة. وهذا مفيد لتشغيل التعليمات البرمجية في بيئة البكر.

+ +

تشغيل المسودة في سياق المتصفح

+ +

يمكنك تشغيل تطبيق المسودة في سياق متصفح ككل بدلا من صفحة ويب معينة. وهذا مفيد إذا كنت تعمل على فايرفوكس نفسها أو تطوير إضافات. للقيام بذلك الاختيار "تمكين الكروم وإضافة على التصحيح" في إعدادات أداة المطور. مرة واحدة كنت قد فعلت هذا، القائمة البيئة لديها خيار المتصفح. وبمجرد أن اختيار، النطاق الخاص بك هو متصفح كامل وليس مجرد محتوى الصفحة، كما سترون من دراسة بعض جلوبل:

+ +
نافذة
+/*
+[كائن ChromeWindow]
+*/
+
+gBrowser
+/*
+[كائن XULElement]
+*/
+ +

تم تعيين سياق التنفيذ المسودة إلى المتصفح عندما ملف قصاصة له // -sp السياق: المتصفح في السطر الأول.
+  

+ +

اختصارات لوحة المفاتيح

+ +

{{صفحة ("EN-US / مستندات / أدوات / Keyboard_shortcuts"، "المسودة")}}

+ +

اختصارات محرر المصدر

+ +

{{صفحة ("EN-US / مستندات / أدوات / Keyboard_shortcuts"، "مصدر محرر")}}

diff --git a/files/ar/tools/storage_inspector/index.html b/files/ar/tools/storage_inspector/index.html new file mode 100644 index 0000000000..b4292a14ea --- /dev/null +++ b/files/ar/tools/storage_inspector/index.html @@ -0,0 +1,112 @@ +--- +title: Storage Inspector +slug: Tools/Storage_Inspector +translation_of: Tools/Storage_Inspector +--- +
{{ToolsSidebar}}
+ +

The Storage Inspector enables you to inspect various types of storage that a web page can use. Currently it can be used to inspect the following storage types:

+ + + +

For the time being, the Storage Inspector only gives you a read-only view of storage. But we're working to let you edit storage contents in future releases.

+ +

Opening the Storage Inspector

+ +

You can open the Storage Inspector by selecting "Storage Inspector" from the Web Developer submenu in the Firefox Menu Panel (or Tools menu if you display the menu bar or are on macOS), or by pressing its Shift + F9 keyboard shortcut.

+ +

The Toolbox will appear at the bottom of the browser window, with the Storage Inspector activated. It's just called "Storage" in the Developer Toolbox.

+ +

+ +

Storage Inspector User Interface

+ +

The Storage Inspector UI is split into three main components:

+ + + +

+ +

Storage tree

+ +

The storage tree lists all the storage types that the Storage Inspector can inspect:

+ +

+ +

Under each type, objects are organized by origin. For cookies, the protocol does not differentiate the origin. For Indexed DB or local storage an origin is a combination of protocol + hostname. For example, "http://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them.

+ +

Under "Cache Storage", objects are organized by origin and then by the name of the cache:

+ +

+ +

IndexedDB objects are organized by origin, then by database name, then by object store name:

+ +

+ +

With the Cookies, Local Storage, and Session Storage types, there's only one level in the hierarchy, so stored items are listed directly under each origin:

+ +

+ +

You can click on each item in the tree to expand or collapse its children. The tree is live, so if a new origin gets added (by adding an iframe, for example), it will be added to each storage type automatically.

+ +

Clicking on a tree item will display detailed information about that item in the Table Widget on the right. For example, clicking on an origin which is a child of the Cookies storage type will show all the cookies belonging to that domain.

+ +

Table Widget

+ +

The table widget displays a list of all the items corresponding to the selected tree item (be it an origin, or database) are listed. Depending on the storage type and tree item, the number of columns in the table might differ.

+ +

All the columns in a Table Widget are resizable. You can hide and show columns by context-clicking on the table header and selecting the columns you want to see:

+ +

+ + + +

There's a search box at the top of the Table Widget:

+ +

+ +

This filters the table to show only items which match the search term. Items match the search term if any of their fields (including fields whose columns you have hidden) contain the search term.

+ +

You can use Ctrl + F (Cmd + F on a Mac) to focus the search box.

+ +

Add and refresh storage

+ +

You'll also have buttons available to add a new storage entry or refresh the view of the currently viewed storage type where applicable (you can't add new entries to IndexedDB or Cache):

+ +

+ + + +

When you select any row in the Storage table widget, the sidebar is shown with details about that row. If a cookie is selected, it will list all the details about that cookie.

+ +

The sidebar can parse the value of the cookie or local storage item or an IndexedDB item and convert it into a meaningful object instead of just a string. For example:

+ + + +

The shown values can also be filtered using the search box at the top of the sidebar.

+ +

Working with the Storage Inspector

+ +

The following articles cover different aspects of using the network monitor:

+ + diff --git a/files/ar/tools/web_console/index.html b/files/ar/tools/web_console/index.html new file mode 100644 index 0000000000..f209646681 --- /dev/null +++ b/files/ar/tools/web_console/index.html @@ -0,0 +1,45 @@ +--- +title: Web Console +slug: Tools/Web_Console +tags: + - أدوات + - الأمان + - التصحيح + - التنقيح + - تطوير الويب + - 'تطوير الويب: أدوات' + - وحدة تحكم الويب +translation_of: Tools/Web_Console +--- +

وحدة تحكم الويب:

+ +
    +
  1. تسجل المعلومات المرتبطة بصفحة الويب: طلبات الشبكة، جافا سكريبت، CSS, أخطاء الأمان و التحذيرات باﻹضافة إلى اﻷخطاء، التحذير والرسائل الإعلامية التي يتم تسجيلها بشكل صريح من خلال شفرة جافا سكريبت التي تعمل في سياق الصفحة
    2. +
  2. تمكّنك من التفاعل مع صفحة الويب عن طريق تنفيذ تعبيرات جافا سكريبت في سياق الصفحة
    3. +
+ +

{{EmbedYouTube("C6Cyrpkb25k")}}

+ +
+
+
+
فتح وحدة تحكم الويب
+
كيف تبدأ إستعمال وحدة تحكم الويب.
+
مفسّر سطر الأوامر
+
كيف تتفاعل مع مستند بإستعمال وحدة التحكم.
+
وحدة التحكم
+
إستخدم وحدة التحكم بجانب الأدوات الأخرى.
+
+
+ +
+
+
رسائل وحدة التحكم
+
تفاصيل الرسائل التي تسجلها وحدة التحكم.
+
خرج غني
+
شاهد و تفاعل مع الكائنات التي تسجلها وحدة التحكم.
+
إختصارات لوحة المفاتيح
+
مرجع اﻹختصار.
+
+
+
diff --git a/files/ar/tools/web_console/the_command_line_interpreter/index.html b/files/ar/tools/web_console/the_command_line_interpreter/index.html new file mode 100644 index 0000000000..119cc57f13 --- /dev/null +++ b/files/ar/tools/web_console/the_command_line_interpreter/index.html @@ -0,0 +1,185 @@ +--- +title: The JavaScript input interpreter +slug: Tools/Web_Console/The_command_line_interpreter +translation_of: Tools/Web_Console/The_command_line_interpreter +--- +
{{ToolsSidebar}}
+ +

You can interpret JavaScript expressions in real time using the interpreter provided by the Web Console. It has two modes: single-line entry and multi-line entry.

+ +

Single-line mode

+ +

For single-line entry, you can type JavaScript expressions in the field at the bottom of the console log, at the >> prompt.

+ +

The Web Console, showing single-line mode

+ +

To enter expressions in single-line mode, type at the prompt and press Enter. To enter multi-line expressions, press Shift+Enter after typing each line, then Enter to run all the entered lines.

+ +

The expression you type is echoed under the input prompt, followed by the result.

+ +

If your input does not appear to be complete when you press Enter, then the Console treats this as Shift+Enter , enabling you to finish your input.

+ +

For example, if you type:

+ +
function foo() {
+ +

and then Enter, the Console does not immediately execute the input, but behaves as if you had pressed Shift+Enter , so you can finish entering the function definition.

+ +

Multi-line mode

+ +

For multi-line entry, click the "split pane" icon at the right hand side of the single-line entry field, or press  Ctrl+B (Windows/Linux) or Cmd+B (macOS). The multi-line editing pane opens on the left side the of Web Console.

+ +

Web Console in multi-line mode

+ +

You can enter multiple lines of JavaScript by default in this mode, pressing Enter after each one. To execute the snippet that is currently in the editing pane, click the Run button or press Ctrl+Enter (or Cmd+Return on MacOS). The snippet is echoed under the input prompt (in the right-side pane), followed by the result. You can also select a range of lines in the editing pane, and run just the code on those lines.

+ +

Starting in Firefox 76, if the code snippet is more than five lines long, only the first five lines are echoed in the console, preceeded by a disclosure triangle (or "twistie"), and followed by an ellipsis (…). Click anywhere in the area containing the echoed code to show the whole snippet; click again in that area to collapse it.

+ +

You can open files when in multi-line mode, and save the current contents of the editing pane to a file.

+ + + +

To switch back to single-line mode, click the X icon at the top of the multi-line editing pane, or press  Ctrl+B (Windows/Linux) or Cmd+B (MacOS).

+ +

Accessing variables

+ +

You can access variables defined in the page, both built-in variables like window and variables added by JavaScript libraries like jQuery:

+ +

+ +

Autocomplete

+ +

The editor has autocomplete: enter the first few letters and a popup appears with possible completions:

+ +

+ +

Press  Enter, Tab, or the right arrow key to accept the suggestion, use the up/down arrows to move to a different suggestion, or just keep typing if you don't like any of the suggestions.

+ +

Console autocomplete suggestions are case-insensitive.

+ +

The console suggests completions from the scope of the currently executing stack frame. This means that if you've hit a breakpoint in a function you get autocomplete for objects local to the function.

+ +

You get autocomplete suggestions for array elements, as well:

+ +

+ +

You can enable or disable autocompletion via the Settings ("gear") menu in the Web Console toolbar. The menuitem Enable Autocompletion has a checkmark next to it when the feature is enabled, which is missing when it is disabled. Select the menuitem to change the state.

+ +

Instant evaluation

+ +
+

This feature is available in Firefox Nightly, in versions labeled 74 and later.

+
+ +

When the "instant evaluation" feature is enabled, the interpreter displays results of expressions as you're typing them in single-line mode. Note that the result might be an error message. Expressions that have side effects are not evaluated.

+ +

You can enable or disable instant evaluation via the Settings ("gear") menu in the Web Console toolbar. The menuitem Instant Evaluation has a checkmark next to it when the feature is enabled, which is missing when it is disabled. Select the menuitem to change the state.

+ +

Execution context

+ +

Code that you have executed becomes part of the execution context, regardless of what editing mode you were in when you executed it. For example, if you type a function definition in the multi-line editor, and click Run, you can switch to single-line mode and still use your function.

+ +

Syntax highlighting

+ +

Console output showing syntax highlighting

+ +

The text you enter has syntax highlighting as soon as you have typed enough for the highlighter to parse it and infer the meanings of the "words".

+ +

The output is highlighted as well where appropriate.

+ +
+

Note: Syntax highlighting is not visible in your browser if Accessibility features have been enabled.

+
+ +

Execution history

+ +

The interpreter remembers expressions you've typed. To move back and forward through your history:

+ + + +

The expression history is persisted across sessions. To clear the history, use the clearHistory() helper function.

+ +

You can initiate a reverse search through the expression history, much like you can in bash on Linux and Mac or PowerShell on Windows. On Windows and Linux press F9. On Mac press Ctrl+R (note: not Cmd+R!) to initiate the reverse search.

+ +

+ +

Enter the text you want to search for in the input box at the bottom of the Console. Start typing part of the expression you are looking for and the first match is displayed in the console. Repeatedly typing F9 on Windows and Linux ( Ctrl+R on Mac) cycles backwards through the matches.

+ +

+ +

Once you  have initiated the reverse search, you can use Shift + F9 on Windows or Linux ( Ctrl+S on Mac) to search forward in the list of matches. You can also use the  ⋀ and ⋁ icons in the expression search bar.

+ +

When you find the expression you want, press Enter (Return) to execute the statement.

+ +

Working with iframes

+ +

If a page contains embedded iframes, you can use the cd() function to change the console's scope to a specific iframe, and then you can execute functions defined in the document hosted by that iframe. There are three ways to select an iframe using cd():

+ +

You can pass the iframe DOM element:

+ +
var frame = document.getElementById("frame1");
+cd(frame);
+ +

You can pass a CSS selector that matches the iframe:

+ +
cd("#frame1");
+ +

You can pass the iframe's global window object:

+ +
var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+
+ +

To switch the context back to the top-level window, call cd() with no arguments:

+ +
cd();
+ +

For example, suppose we have a document that embeds an iframe:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
+  </body>
+</html>
+ +

The iframe defines a new function:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function whoAreYou() {
+        return "I'm frame1";
+      }
+   </script>
+  </head>
+  <body>
+  </body>
+</html>
+ +

You can switch context to the iframe like this:

+ +
cd("#frame1");
+ +

Now you'll see that the global window's document is the iframe:

+ +

+ +

And you can call the function defined in the iframe:

+ +

+ +

Helper commands

+ +

{{ page("en-US/docs/Tools/Web_Console/Helpers", "The commands") }}

diff --git a/files/ar/tools/webide/index.html b/files/ar/tools/webide/index.html new file mode 100644 index 0000000000..906c5e9912 --- /dev/null +++ b/files/ar/tools/webide/index.html @@ -0,0 +1,467 @@ +--- +title: WebIDE +slug: Tools/WebIDE +tags: + - Apps + - B2G + - Debugging + - Firefox OS + - NeedsTranslation + - TopicStub + - WebIDE + - tool +translation_of: Archive/WebIDE +--- +
+

WebIDE is available from Firefox 34 onwards.

+
+ +
+

WebIDE is the replacement for the App Manager. Like the App Manager, it enables you to run and debug Firefox OS apps using the Firefox OS Simulator or a real Firefox OS device.

+ +

However, it also provides an editing environment for you to create and develop Firefox OS apps, including a tree view of all the files in your app with the ability to edit and save them, and two app templates to help you get started.

+ +

Finally, WebIDE enables you to connect the Firefox Developer Tools to a number of other browsers, including Firefox for Android, Chrome on Android, and Safari on iOS. See the Remote Debugging page for instructions on how to connect to a specific browser.

+
+ +

With WebIDE, you first set up one or more runtimes. A runtime is an environment in which you'll run and debug the app. A runtime could be a Firefox OS device connected to the desktop over USB, or it could be a Firefox OS Simulator installed on the desktop itself.

+ +

Next, you create an app, or open an existing app. If you're creating a new app you start with a template that includes the directory structure and the minimum boilerplate you need to get started, or a more complete template that shows how to use a privileged API. WebIDE shows your app's files in a tree, and you can edit and save them using a built-in source editor. Of course, you don't have to use the built-in editor: you can develop your app entirely outside WebIDE, and only use it for debugging.

+ +

Finally, you can install the app in one of the runtimes and run it. You can then open the usual suite of developer tools - the Inspector, Console, JavaScript Debugger and so on - to examine and modify the running app.

+ +

System requirements

+ +

To develop and debug apps using WebIDE, all you need is Firefox version 33 or later. To test on a real Firefox OS device, you need a device running Firefox OS 1.2 or later, and a USB cable.

+ +

You can only use WebIDE for Firefox OS if you're targeting Firefox OS 1.2 or later.

+ +

Opening WebIDE

+ +

There are three ways to open WebIDE:

+ + + +

+ +

Here's what the WebIDE looks like:The dropdown on the left labeled "Open App" lets you open existing apps or create new ones. The dropdown on the right labeled "Select Runtime" lets you select a runtime or set up a new runtime.

+ +

The buttons in the middle run, stop, and debug the app: they are only enabled when you have opened an app and selected a runtime.

+ +

From Firefox 36, you can change the font size throughout WebIDE using the standard keyboard shortcuts (use Command instead of Control on OS X):

+ + + +

Setting up runtimes

+ +

Under the "Select Runtime" dropdown, runtimes are grouped into three types:

+ + + +

The first time you click the dropdown, you might not see any runtimes here:

+ +

The rest of this section describes how you can add some runtimes.

+ +

Connecting a Firefox OS device

+ +

Before you can connect a Firefox OS device, there's some setup you have to go through:

+ + + +
+

Linux only:

+ + +
+ +
+

Windows only:

+ + +
+ +

If there are any other Android devices connected to your computer, disconnect them. Now connect the device to the computer using USB. You should see the device appear under "USB DEVICES":

+ +

+ +

If you don't see your device, see the Troubleshooting page.

+ +

Connecting to Firefox for Android

+ +

From Firefox 36 onwards Android devices connected over USB and running Firefox for Android appear as a runtime under "USB devices". See the article on connecting to Firefox for Android from WebIDE.

+ +

Before Firefox 36, you can connect to Firefox for Android without using WebIDE at all, or can use WebIDE by setting up a custom remote runtime.

+ +

Adding a Simulator

+ +

The Firefox OS Simulator is a version of the higher layers of Firefox OS that simulates a Firefox OS device, but runs on the desktop. It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.

+ +

This means that in many cases, you don't need a real device to test and debug your app.

+ +

The Simulator is big, so it doesn't ship inside Firefox but as a Firefox add-on. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.

+ +

You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:

+ +

To learn more about the Simulator, see its documentation page.

+ +

Custom runtimes

+ +

Remote runtime

+ +

With a custom remote runtime you can use an arbitrary hostname and port to connect to the remote device.

+ +

Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or ADB. By default, WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.

+ +

This is convenient in most cases, but sometimes you might want to use ADB outside of WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the adb forward command (example: adb forward tcp:6000 localfilesystem:/data/local/debugger-socket).
+
+ If you then want to use WebIDE to connect as well, you should disable the ADB Helper add-on and connect WebIDE using the Custom runtime option, entering the host and port that you passed to adb forward (example: localhost:6000).

+ +

Also, before Firefox 36, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. See more about connecting to Firefox for Android using ADB prior to Firefox 36.

+ +

Valence-enabled runtimes

+ +

If you have the Valence add-on installed, you'll see three additional runtimes:

+ + + +

For instructions on how to connect to these runtimes, see the relevant entry in the Remote Debugging page.

+ +

Selecting a runtime

+ +

Once you've set up a runtime you can select it using the "Select Runtime" menu.

+ + + +

Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.

+ +

Runtime menu items

+ +

When a runtime is selected, the Runtimes dropdown menu has up to five extra items:

+ +
+
Runtime Info
+
Information on the current runtime
+
Permissions Table
+
A table summarising app permissions for the current runtime, indicating, for each API and each app type, whether access is allowed (✓), denied (✗), or whether the user is prompted (!)
+
+ +
+
Device Preferences
+
A table listing, and letting you edit, the preferences that are made available in the runtime via the Preferences service. These are platform-level configuration values exposing the same set of data as Firefox's about:config (but for the device). Because these preferences are highly security-sensitive, you need to disable the DevTools restricted privileges setting before you can modify them.
+
Device Settings (new in Firefox 38/Firefox OS 3)
+
A table listing, and letting you edit, the settings that can be controlled in the Firefox OS Settings app. Most things on the device which have a UI control to change (volume, alarm, etc.) are found in Device Settings. Because these settings are less sensitive than the device preferences, you can modify them without removing the restricted privileges setting. However, since this feature is new in Gecko 38 you need the WebIDE in Firefox 38 and a nightly build of Firefox OS or the Simulator.
+
Screenshot
+
A command to take a screenshot from the runtime.
+
+ +

+ +

 

+ +

Creating and opening apps

+ +

Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:

+ +

+ +

Create a new app

+ +

Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".

+ +

+ +

Both templates are from Mozilla's app template collection, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.

+ +

Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the project editor.

+ +

Open a packaged app

+ +

Select "Open Packaged App..." to open a packaged app. You'll be asked to select a directory containing the app's manifest, and the app will be opened in the project editor.

+ +

Open a hosted app

+ +

Select "Open Hosted App..." to open a hosted app. You'll be asked to enter a URL pointing to the app's manifest, and the app will be opened in the project editor.

+ +

Editing apps

+ +

The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.

+ +

The app summary page

+ +

When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:

+ +

+ +

You can always get back to the app summary page by clicking on the root of the tree on the left.

+ +

Manifest validation

+ +

WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:

+ +

+ +

Of course, you can edit the manifest.webapp file right in the project editor as well.

+ +

The source editor

+ +

WebIDE uses the CodeMirror source editor.

+ +

Source editor shortcuts

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

Code completion

+ +

When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:

+ +

To display autocomplete suggestions in JavaScript press Control + Space:

+ +

+ +

Inline documentation

+ +

The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:

+ +

+ +

Clicking the [docs] link in the popup will take you to the MDN page for the symbol.

+ +

Saving files

+ +

For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).

+ +

Removing projects

+ +

To remove an app from WebIDE, go to the app summary page and click "Remove Project".

+ +

Running a custom build step

+ +
+

New in Firefox 37.

+
+ +

For some use cases you need to run a custom command before pushing your app to the device. For example, you might want to satisfy JavaScript dependencies or minify CSS, or use WebIDE to develop Gaia apps or Cordova apps, both of which require a custom build step.

+ +

From Firefox 37 you can do this by including a file called "package.json" in the root of your app. This is the same file that's used to package a node.js library, so you might already have one in the root of your project. If you don't, you can create one for this purpose.

+ +

Inside package.json, WebIDE looks for a property called "webide". The table below summarises the syntax of "webide":

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
webide   +

Object containing instructions for WebIDE.

+ +

This may contain two properties, both optional: "prepackage" and "packageDir".

+
 prepackage  +

Specifies a command-line command for WebIDE to run before pushing the app to the runtime.

+ +

This may be a string, in which case the command is just executed as-is, or may be an object which must contain "command", and may contain any of "env", "args", and "cwd".

+
  command +

The command to execute in the command shell.

+ +

For example: "echo".

+
  env +

Any environment variables to set.

+ +

This is specified as an array of strings in the form "NAME=value". For example: ["NAME=world"]

+
  args +

Any arguments to pass along with the command.

+ +

This is specified as an array of strings.

+
  cwd +

The directory from which to run the command.

+ +

This may be absolute or relative to the current directory.

+
 packageDir  +

The directory from which WebIDE should look for the app to push to the runtime.

+ +

Use this if you want the project in WebIDE to be the source from which to build a packaged app. The build step specified in prepackage would place the built app in an output directory, you will specify the output directory in packageDir, and WebIDE will install the app from that output directory rather than the project directory.

+ +

This property is optional, and if it's omitted WebIDE will package the app from the project root, just as if package.json was omitted.

+
+ +

Examples

+ +

A "package.json" to build a Gaia app:

+ +
{
+  "webide": {
+    "prepackage": {
+      "command": "make",
+      "env": ["APP=settings"],
+      "cwd": "../.."
+    },
+    "packageDir": "../../build_stage/settings/"
+  }
+}
+ +

A "package.json" for working with Cordova:

+ +
{
+  "webide": {
+    "prepackage": "cordova prepare",
+    "packageDir": "./platforms/firefoxos/www"
+  }
+}
+ +

Running and debugging apps

+ +

When you're ready to run the app, you need to select a runtime from the "Select Runtime" dropdown menu. If you don't have any available runtimes here, find out how to add some in Setting up runtimes.

+ +

The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:

+ +

To debug the app, click the "Pause" button and the Developer Tools Toolbox appears, connected to your app:

+ +

+ +
+

From Firefox 36 onwards, the "Pause" button is replaced with a wrench icon.

+
+ +

Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the Inspector, Console, JavaScript Debugger, Style Editor, Profiler and Scratchpad. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.

+ +

Unrestricted app debugging (including certified apps, main process, etc.)

+ +

You can run the debugger against the simulator, b2g desktop, or a real device.

+ +

With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including certified apps:

+ +

+ +


+ However, when connecting to a real device we have a security policy in force:

+ + + +

To remove this restriction:

+ + + +

To disable DevTools restricted privileges, connect to the runtime, and then, in the menu, go to Runtime > Runtime Info. The path then differs depending on what you are debugging against:

+ + + +

Now (or after a restart of the B2G desktop client) in WebIDE you should see all the apps on the device.

+ +
+

Note: As indicated above, to enable unrestricted privileges on a real device through WebIDE you'll need a rooted device. There is however a developer setting available in Firefox OS 2.2 onwards called Reset and enable full DevTools — when activated this will wipe all user data (for security reasons), reset the device, and enable unrestricted priviledges on any device.

+
+ +

Monitoring performance

+ +

If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:

+ + + +

Troubleshooting

+ +

If you have any problems working with WebIDE, see the Troubleshooting page.

+ +

 

+ +

 

diff --git a/files/ar/tools/webide/troubleshooting/index.html b/files/ar/tools/webide/troubleshooting/index.html new file mode 100644 index 0000000000..9841f92d7d --- /dev/null +++ b/files/ar/tools/webide/troubleshooting/index.html @@ -0,0 +1,107 @@ +--- +title: WebIDE Troubleshooting +slug: Tools/WebIDE/Troubleshooting +translation_of: Archive/WebIDE/Troubleshooting +--- +

توصيل جهاز فايرفوكس OS

+ +

إذا كنت تحاول توصيل جهاز فايرفوكس OS لWebIDE وأنها لا تظهر، وهنا بعض الأشياء التي يمكنك تجربتها:

+ + + +

التصحيح غير المقيد (بما في ذلك التطبيقات المعتمدة، المدمج في تطبيقات، تطبيقات مثبتة مسبقا على الجهاز)

+ +

إذا كنت تجد أنه لا يمكن تصحيح التطبيقات المعتمدة، المدمج في تطبيقات، أو تطبيقات مثبتة مسبقا على الجهاز الحقيقي، فإنك قد تكون قادمة عبر تقييد السياسة الأمنية امتيازات WebIDE ل. لمعرفة المزيد، راجع القسم الخاص غير المقيد تصحيح التطبيق (بما في ذلك التطبيقات المعتمدة، والعملية الرئيسية، الخ).

+ +

الاتصال فايرفوكس لأندرويد

+ +

إذا كنت تحاول الاتصال مثيل فايرفوكس يعمل على نظام التشغيل أندرويد وأنها لا تظهر، وهنا بعض الأشياء التي يمكنك تجربتها:

+ + + +

الاتصال المتصفحات الأخرى (كروم، سفاري)

+ +

WebIDE يستفيد من فالنسيا (سابقا فايرفوكس أدوات محول) للوصول إلى المتصفحات الأخرى، مثل كروم وسفاري. 

+ +

إذا كنت تواجه مشكلة في الاتصال لهذه المتصفحات الأخرى، والتحقق من خطوات الإعداد والملاحظات الأخرى لهذه المتصفحات على الصفحة فالنسيا.

+ +

غير قادر على تحميل قائمة المشروع

+ +

إذا كنت WebIDE مفتوحة في إصدار واحد من فايرفوكس، ثم الرجوع إلى إصدار فايرفوكس السابق مع نفس التشكيل الجانبي، قد ترى الخطأ "غير قادر على تحميل قائمة المشروع" عند فتح WebIDE في فايرفوكس الإصدار السابق.

+ +

يمكن أن يحدث هذا عندما يكون النظام التخزين التي WebIDE الاستخدامات (المفهرسة يحتاج) لنقل أو إعادة هيكلة الملفات الداخلية لفايرفوكس الإصدار الأحدث. يصبح قائمة المشروع ثم لا يمكن الوصول إليها بشكل فعال في الإصدارات القديمة من فايرفوكس.

+ +

تم فقدان أية بيانات، ولكنك لن تحتاج إلى الاستمرار في استخدام أحدث نسخة من فايرفوكس الذي تم استخدامه مع ملف التعريف الخاص بك للحصول على قائمة المشروع مرة أخرى.

+ +

إذا تريد حقا أن استخدام النسخة القديمة من فايرفوكس، يمكنك محاولة حذف القائمة للتو المشروع على النحو التالي، ولكن هذا غير معتمد ويمكن أن تؤدي إلى مشاكل أخرى أو فقدان بيانات إضافية:

+ +
    +
  1. وثيق فايرفوكس
    2. +
  2. البحث فايرفوكس الدليل ملفك الشخصي
    3. +
  3. العثور على تخزين مجلد داخل الدليل الشخصي
    4. +
  4. تحت جزء من هذه الشجرة الملف، يجب أن يكون هناك ملفات و / أو الدلائل التي تبدأ مع 4268914080AsptpcPerjo (اسم تجزئته من قاعدة البيانات)
    5. +
  5. إزالة أي من هذه الملفات والدلائل
    6. +
  6. بدء فايرفوكس وWebIDE مرة أخرى
    7. +
+ +

تمكين تسجيل

+ +

يمكنك أيضا تمكين تسجيل مطول لجمع التشخيص:

+ +
    +
  1. مفتوح حول: التكوين، وإضافة تفضيل جديد يسمى extensions.adbhelper@mozilla.org.sdk.console.logLevel، مع قيمة السلسلة جميع، وتعيين extensions.adbhelper@mozilla.org.debug إلى صحيح.
    2. +
  2. في إدارة الوظائف الإضافية، تعطيل ومن ثم إعادة تمكين ADB مساعد الإضافة.
    3. +
  3. فتح المتصفح وحدة التحكم، وعليك الآن أن نرى رسائل تعزية مسبوقة مع بنك التنمية الآسيوي. إذا لا تعني الرسائل لك شيئا، اطلب المساعدة.
    4. +
+ +

الحصول على المساعدة

+ +

انتقل إلى غرفة #devtools على IRC وسنحاول مساعدة.

-- cgit v1.2.3-54-g00ecf