From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/th/tools/debugger/index.html | 59 ++++++ .../index.html" | 149 ++++++++++++++ files/th/tools/eyedropper/index.html | 42 ++++ files/th/tools/index.html | 218 +++++++++++++++++++++ files/th/tools/webide/index.html | 42 ++++ files/th/tools/webide/troubleshooting/index.html | 117 +++++++++++ .../index.html" | 161 +++++++++++++++ .../index.html" | 43 ++++ .../index.html" | 26 +++ 9 files changed, 857 insertions(+) create mode 100644 files/th/tools/debugger/index.html create mode 100644 "files/th/tools/debugger/www.\340\270\253\340\270\231\340\270\261\340\270\207\340\271\202\340\270\233\340\271\211.com/index.html" create mode 100644 files/th/tools/eyedropper/index.html create mode 100644 files/th/tools/index.html create mode 100644 files/th/tools/webide/index.html create mode 100644 files/th/tools/webide/troubleshooting/index.html create mode 100644 "files/th/tools/webide/\340\270\201\340\270\262\340\270\243\340\270\225\340\270\261\340\271\211\340\270\207\340\270\204\340\271\210\340\270\262\340\270\243\340\270\261\340\270\231\340\271\204\340\270\227\340\270\241\340\271\214/index.html" create mode 100644 "files/th/tools/webide/\340\270\201\340\270\262\340\270\243\340\270\227\340\271\215\340\270\262\340\270\207\340\270\262\340\270\231\340\270\243\340\271\210\340\270\247\340\270\241\340\270\201\340\270\261\340\270\232\340\270\204\340\270\255\340\270\243\340\271\214\340\271\202\340\270\224\340\270\247\340\270\262\340\271\201\340\270\255\340\270\236\340\270\236\340\270\245\340\270\264\340\271\200\340\270\204\340\270\212\340\270\261\340\271\210\340\270\231\340\271\203\340\270\231_webide/index.html" create mode 100644 "files/th/tools/webide/\340\270\201\340\270\262\340\270\243\340\271\200\340\270\233\340\270\264\340\270\224_webide/index.html" (limited to 'files/th/tools') diff --git a/files/th/tools/debugger/index.html b/files/th/tools/debugger/index.html new file mode 100644 index 0000000000..c384131b2e --- /dev/null +++ b/files/th/tools/debugger/index.html @@ -0,0 +1,59 @@ +--- +title: The Firefox JavaScript Debugger +slug: Tools/Debugger +tags: + - Debugger + - Debugging + - Dev Tools + - JavaScript + - NeedsTranslation + - Tools + - TopicStub + - 'l10n:priority' +translation_of: Tools/Debugger +--- +
{{ToolsSidebar}}
+ +

The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.

+ +

{{EmbedYouTube("QK4hKWmJVLo")}}

+ +

You can use it to debug code running locally in Firefox or running remotely, for example on an Android device running Firefox for Android. See remote debugging to learn how to connect the debugger to a remote target.

+ +

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

+ +

How to

+ +

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

+ +
+ +
+ +
+

Reference

+ +
+ +
diff --git "a/files/th/tools/debugger/www.\340\270\253\340\270\231\340\270\261\340\270\207\340\271\202\340\270\233\340\271\211.com/index.html" "b/files/th/tools/debugger/www.\340\270\253\340\270\231\340\270\261\340\270\207\340\271\202\340\270\233\340\271\211.com/index.html" new file mode 100644 index 0000000000..a4c0bcf086 --- /dev/null +++ "b/files/th/tools/debugger/www.\340\270\253\340\270\231\340\270\261\340\270\207\340\271\202\340\270\233\340\271\211.com/index.html" @@ -0,0 +1,149 @@ +--- +title: หนังโป้ +slug: Tools/Debugger/www.หนังโป้.com +translation_of: Tools/Debugger/UI_Tour +--- +
{{ToolsSidebar}}
+ +

บทความนี้แนะนำโดยย่อเกี่ยวกับส่วนหลักของส่วนต่อประสานผู้ใช้ JavaScript Debugger UI ถูกแบ่งออกเป็นสามส่วนในแนวตั้ง

+ + + +

+ +

บานหน้าต่างรายการแหล่งที่มา

+ +

บานหน้าต่างรายการแหล่งข้อมูลจะแสดงรายการไฟล์ต้นฉบับ JavaScript ทั้งหมดที่โหลดลงในหน้าและช่วยให้คุณสามารถเลือกหนึ่งไฟล์ที่จะดีบั๊กที่แหล่งข้อมูลระดับบนสุดจะถูกจัดระเบียบโดยแหล่งกำเนิดและภายใต้ว่าพวกเขาจัดระเบียบ โดยโครงสร้างที่พวกเขาจะให้บริการ

+ +

+ +

คุณสามารถค้นหาไฟล์โดยใช้Ctrl+ P( Cmd+ Pบน Mac)

+ +

ส่วนขยายของเว็บจะแสดงรายการในบานหน้าต่างรายการแหล่งที่มาโดยใช้ชื่อส่วนขยาย

+ +

+ +

มีตัวเลือกเมนูหลายไฟล์และโฟลเดอร์หรือกลุ่มโดยทั่วไปแล้วจะดูได้โดยคลิกขวาที่รายการ

+ +

สำหรับไฟล์ตัวเลือกเมนูบริบทต่อไปนี้จะมีให้ใช้งาน:

+ +

สกรีนช็อตแสดงตัวเลือกเมนูบริบทสำหรับไฟล์ในบานหน้าต่างรายการแหล่งที่มา

+ + + +

สำหรับโฟลเดอร์และกลุ่มมีตัวเลือกเมนูบริบทต่อไปนี้:

+ +

สกรีนช็อตแสดงตัวเลือกเมนูบริบทสำหรับโฟลเดอร์ในบานหน้าต่างรายการแหล่งที่มา

+ + + +

มุมมองโครงร่าง

+ +

มุมมองโครงร่างแสดงแผนผังสำหรับการนำทางไฟล์ที่เปิดอยู่ในปัจจุบัน ใช้เพื่อข้ามไปยังนิยามฟังก์ชันคลาสหรือเมธอดโดยตรง

+ +

บานหน้าต่างแหล่งที่มา

+ +

นี่แสดงไฟล์ JavaScript ที่โหลดอยู่ในปัจจุบัน

+ +

เมื่อบานหน้าต่างต้นทางมุ่งเน้นคุณสามารถค้นหาสตริงในไฟล์โดยใช้Ctrl+ F( Cmd+ Fบน Mac)

+ +

Breakpoints have a blue arrow overlaid on the line number. Conditional breakpoints have an orange arrow. If you're stopped at a breakpoint, the entire line gets a green overlay. In the screenshot below there are three breakpoints:

+ + + +

+ +

The third column shows more information about the breakpoints. For example, the logpoint at line 85 logs the value of the tableRow variable to the console and the conditional breakpoint at line 100 breaks if the contents of the todoList is undefined.

+ +

Toolbar

+ +

At the top of the right-hand pane, there's a toolbar:

+ +

+ +

The toolbar consists of:

+ + + +

Breakpoints list

+ +

Under the toolbar, you'll see all the breakpoints you've set. Next to each breakpoint is a checkbox which you can use to enable/disable it:

+ +

+ +

Watch expressions

+ +

You can add watch expressions in the right pane. They will be evaluated when code execution is paused:

+ +

+ +

Variable tooltip

+ +

Hover on a variable show a tooltip with its value inside:

+ +

+ +

Call stack

+ +

When the debugger's paused, you'll see a call stack:

+ +

Each level of the call stack gets a line, with the name of the function and the filename and line number. Clicking the line opens that source in the source pane.

+ +

Right-clicking in the call stack pane opens a context menu with the following items:

+ + + +

ขอบเขต

+ +

คุณจะเห็นป้ายชื่อ "ขอบ" พร้อมลูกศรซ่อนอยู่หลังป้ายชื่อตัวละครที่ซ่อนอยู่ในตอนท้ายของโปรแกรม:

+ +

ภาชนะที่ถูกจัดเรียงตามขอบ: ส่วนใหญ่จะขึ้นก่อนหน้านี้และวงกลมใหญ่ทั่วโลก

diff --git a/files/th/tools/eyedropper/index.html b/files/th/tools/eyedropper/index.html new file mode 100644 index 0000000000..0c7192993a --- /dev/null +++ b/files/th/tools/eyedropper/index.html @@ -0,0 +1,42 @@ +--- +title: Eyedropper +slug: Tools/Eyedropper +translation_of: Tools/Eyedropper +--- +
+

Eyedropper ใหม่ใน Firefox 31

+
+ +

เครื่องมือ Eyedropper ช่วยให้คุณสามารถเลือกสีที่มีในหน้าปัจจุบัน มันทำงานเหมือนแว่นขยายทั่วหน้าช่วยให้คุณสามารถเลือกที่มีความแม่นยำพิกเซล ภายใต้แว่นขยายจะแสดงค่าสีสำหรับพิกเซลปัจจุบันโดยใช้รูปแบบใดก็ตามที่คุณได้เลือกไว้ในการตั้งค่า :

+ +

คุณสามารถใช้มันในหนึ่งในสองวิธี:

+ + + +

คัดลอกสีไปยังคลิปบอร์ด

+ +

เปิด Eyedropper ในหนึ่งในสองวิธี:

+ + + +

ขณะที่คุณเลื่อนเมาส์ไปรอบ ๆ หน้าคุณจะเห็นค่าสีในปัจจุบันในการเปลี่ยนแปลง Eyedropper คลิกสำเนาค่าสีในปัจจุบันไปยังคลิปบอร์ด

+ +

{{EmbedYouTube ("xf2uk6UyRB8")}}

+ +

การเปลี่ยนค่าสีในมุมมองกฎ

+ +

ค่าสีที่ปรากฏในกฎของสารวัตรดูมีตัวอย่างสีไปให้พวกเขา: คลิกตัวอย่างที่แสดงให้เห็นป๊อปอัพตัวเลือกสี จาก Firefox 31 ป๊อปอัพที่มีไอคอน Eyedropper: คลิกที่ไอคอนนี้เพื่อเปิดใช้ Eyedropper

+ +

ตอนนี้เมื่อคุณคลิก Eyedropper สีในมุมมองกฎที่ถูกกำหนดให้เป็นสีที่คุณเลือก

+ +

{{EmbedYouTube ("0Zx1TN21QOo")}}

+ +

แป้นพิมพ์ลัด

+ +

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

diff --git a/files/th/tools/index.html b/files/th/tools/index.html new file mode 100644 index 0000000000..376632a8b8 --- /dev/null +++ b/files/th/tools/index.html @@ -0,0 +1,218 @@ +--- +title: เครื่องมือสำหรับนักพัฒนา Firefox +slug: Tools +tags: + - Developing Mozilla + - NeedsMarkupWork + - NeedsTechnicalReview + - NeedsTranslation + - Tools + - TopicStub + - Web Development + - 'Web Development: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/th/tools/webide/index.html b/files/th/tools/webide/index.html new file mode 100644 index 0000000000..13acbd9330 --- /dev/null +++ b/files/th/tools/webide/index.html @@ -0,0 +1,42 @@ +--- +title: WebIDE +slug: Tools/WebIDE +tags: + - Apps + - B2G + - Debugging + - Firefox OS + - NeedsTranslation + - TopicStub + - WebIDE + - tool +translation_of: Archive/WebIDE +--- +
+

WebIDE ช่วยให้คุณสามารถสร้าง, แก้ไข, ทำงานและการแก้ปัญหาแอพพลิเคชั่นเว็บ โดยใช้ Firefox OS Simulator หรืออุปกรณ์ Firefox OS จริง

+ +

นอกจากนี้ยังช่วยให้คุณสามารถเชื่อมต่อ Firefox Developer Tools ไปยังเบราว์เซอร์อื่น ๆ รวมทั้ง Firefox สำหรับ Android, Chrome บน Android, และ Safari บน iOS
+ โปรดดู หน้า Remote Debugging สำหรับคำแนะนำเกี่ยวกับวิธีการเชื่อมต่อกับเบราว์เซอร์ที่เฉพาะเจาะจง

+
+ +

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 over Wi-Fi since Firefox 39), 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 can 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.

+ +
+
+
การเปิด WebIDE
+
วิธีการเปิด WebIDE จากภายใน Firefox
+
การตั้งค่ารันไทม์
+
วิธีการเชื่อมต่อกับรันไทม์ในที่ที่คุณสามารถติดตั้งแอพพลิเคชั่นรวมทั้งอุปกรณ์ Firefox OS, Firefox OS Simulator, และ Firefox สำหรับ Android
+
การสร้างและการแก้ไขแอพพลิเคชั่น
+
วิธีการ สร้าง เปิด และพัฒนาแอพพลิเคชั่น โดยใช้ WebIDE
+
การทำงานและการแก้จุดบกพร่องแอพพลิเคชั่น
+
วิธีการติดตั้งแอพพลิเคชั่นรันไทม์และแก้ปัญหาโดยใช้ Firefox เครื่องมือสำหรับนักพัฒนา
+
การทำงานร่วมกับคอร์โดวาแอพพลิเคชั่นใน WebIDE
+
จาก Firefox 39, คุณสามารถแก้ไขและการแก้ปัญหาคอร์โดวาแอพพลิเคชั่นที่ใช้ WebIDE
+
การแก้ไขปัญหา
+
ความช่วยเหลือสำหรับปัญหาเกี่ยวกับ WebIDE โดยเฉพาะอย่างยิ่งปัญหาการเชื่อมต่อกับรันไทม์
+
diff --git a/files/th/tools/webide/troubleshooting/index.html b/files/th/tools/webide/troubleshooting/index.html new file mode 100644 index 0000000000..d6dd5fd51c --- /dev/null +++ b/files/th/tools/webide/troubleshooting/index.html @@ -0,0 +1,117 @@ +--- +title: การแก้ไขปัญหา WebIDE +slug: Tools/WebIDE/Troubleshooting +translation_of: Archive/WebIDE/Troubleshooting +--- +

การเชื่อมต่ออุปกรณ์ Firefox OS ผ่าน USB

+ +

ถ้าคุณกำลังพยายามที่จะเชื่อมต่ออุปกรณ์ Firefox OS เพื่อ WebIDE และ มันไม่แสดงขึ้น นี่คือบางสิ่งที่คุณสามารถลองทำ:

+ + + +

การเชื่อมต่ออุปกรณ์ Firefox OS ผ่าน Wi-Fi

+ + + +

การเชื่อมต่อกับ Firefox สำหรับ Android

+ +

หากคุณกำลังพยายามเชื่อมต่อกับอินสแตนซ์ Firefox ที่รันบน Android OS และไม่ปรากฏขึ้นคุณสามารถลองทำสิ่งต่างๆต่อไปนี้:

+ + + +

การเชื่อมต่อกับเบราว์เซอร์อื่น ๆ (Chrome, Safari)

+ +

WebIDE ใช้Valence (ก่อนหน้านี้คือ Firefox Tools Adapter)เพื่อเข้าถึงเบราว์เซอร์อื่นเช่น Chrome และ Safari 

+ +

หากคุณกำลังมีปัญหาในการเชื่อมต่อกับเบราว์เซอร์อื่น ๆ เหล่านี้ให้ตรวจสอบขั้นตอนการติดตั้งและบันทึกอื่น ๆ สำหรับเบราว์เซอร์ผู้ที่อยู่ในหน้า Valence

+ +

ไม่สามารถแก้ปัญหาบางแอพพลิเคชั่น(debug)

+ +

หากคุณพบว่าคุณไม่สามารถแก้ปัญหาแอปพลิเคชันที่ได้รับการรับรองแอปที่ติดตั้งหรือแอปที่ติดตั้งไว้ในอุปกรณ์จริงแล้วคุณอาจกำลังดูนโยบายด้านความปลอดภัยที่มีสิทธิ์ จำกัด ของ WebIDE หากต้องการข้อมูลเพิ่มเติมโปรดดูที่ส่วนที่เกี่ยวกับการแก้จุดบกพร่องไม่ จำกัด แอป (รวมถึงแอพพลิเคได้รับการรับรองกระบวนการหลัก ฯลฯ )

+ +

ไม่สามารถโหลดรายชื่อโครงการ

+ +

หากคุณเปิด WebIDE ใน Firefox เวอร์ชันใดเวอร์ชันหนึ่งแล้วปรับลดรุ่นเป็น Firefox เวอร์ชันก่อนหน้าด้วยโปรไฟล์เดียวกันคุณอาจเห็นข้อผิดพลาด "Unable to load project list" เมื่อเปิด WebIDE ในเวอร์ชัน Firefox ก่อนหน้านี้

+ +

ซึ่งอาจเกิดขึ้นได้เมื่อระบบจัดเก็บข้อมูลที่ WebIDE ใช้ ( IndexedDB ) จำเป็นต้องย้ายหรือปรับโครงสร้างไฟล์ภายในสำหรับเวอร์ชัน Firefox รุ่นใหม่ รายการโครงการจะกลายเป็นเวอร์ชันล่าสุดของ Firefox ที่ไม่สามารถเข้าถึงได้

+ +

ไม่มีข้อมูลสูญหาย แต่คุณจะต้องใช้ Firefox รุ่นล่าสุดที่ใช้กับโปรไฟล์ของคุณเพื่อรับรายชื่อโครงการ

+ +

ถ้าคุณต้องการใช้ Firefox เวอร์ชันเก่ากว่านี้คุณสามารถลองลบรายการโครงการตามวิธีการต่อไปนี้ได้ แต่นี่ไม่ได้รับการสนับสนุนและอาจส่งผลต่อปัญหาหรือการสูญหายของข้อมูลเพิ่มเติม:

+ +
    +
  1. ปิด Firefox
    2. +
  2. ค้นหาไดเรกทอรีโปรไฟล์ Firefox ของคุณ
    3. +
  3. ค้นหาstorageโฟลเดอร์ภายในไดเร็กทอรีโปรไฟล์
    4. +
  4. ภายใต้บางส่วนของต้นไม้แฟ้มนี้ควรมีไฟล์และ / หรือไดเรกทอรีที่ขึ้นต้นด้วย4268914080AsptpcPerjo(ชื่อที่ถูกแฮชของฐานข้อมูล)
    5. +
  5. ลบไฟล์และไดเรกทอรีดังกล่าวออก
    6. +
  6. เริ่ม Firefox และ WebIDE อีกครั้ง
    7. +
+ +

เปิดใช้งานการเข้าสู่ระบบ

+ +

นอกจากนี้คุณยังสามารถเปิดใช้งานการบันทึกข้อมูลแบบ verbose เพื่อรวบรวมการวินิจฉัย:

+ +
    +
  1. เปิดabout: configและเพิ่มการตั้งค่าใหม่ที่เรียกว่าextensions.adbhelper@mozilla.org.sdk.console.logLevelมีค่าสตริงallและการตั้งค่าไปextensions.adbhelper@mozilla.org.debugtrue
    2. +
  2. ในAdd-on Managerให้ปิดใช้งานและเปิดใช้งานAdd-onของ ADB Helper ใหม่
    3. +
  3. เปิดเบราว์เซอร์คอนโซลadbและตอนนี้คุณจะเห็นข้อความที่คอนโซลหน้าด้วย ถ้าข้อความไม่ได้มีความหมายอะไรกับคุณขอความช่วยเหลือ
    4. +
+ +

ต้องการความช่วยเหลือ

+ +

ไปที่ #devtools room on IRC และเราจะพยายามที่จะช่วย

diff --git "a/files/th/tools/webide/\340\270\201\340\270\262\340\270\243\340\270\225\340\270\261\340\271\211\340\270\207\340\270\204\340\271\210\340\270\262\340\270\243\340\270\261\340\270\231\340\271\204\340\270\227\340\270\241\340\271\214/index.html" "b/files/th/tools/webide/\340\270\201\340\270\262\340\270\243\340\270\225\340\270\261\340\271\211\340\270\207\340\270\204\340\271\210\340\270\262\340\270\243\340\270\261\340\270\231\340\271\204\340\270\227\340\270\241\340\271\214/index.html" new file mode 100644 index 0000000000..cbc902734e --- /dev/null +++ "b/files/th/tools/webide/\340\270\201\340\270\262\340\270\243\340\270\225\340\270\261\340\271\211\340\270\207\340\270\204\340\271\210\340\270\262\340\270\243\340\270\261\340\270\231\340\271\204\340\270\227\340\270\241\340\271\214/index.html" @@ -0,0 +1,161 @@ +--- +title: การตั้งค่ารันไทม์ +slug: Tools/WebIDE/การตั้งค่ารันไทม์ +translation_of: Archive/WebIDE/Setting_up_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, it could be a Firefox OS Simulator installed on the desktop itself, or it could be another instance of Firefox Desktop.

+ +

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

+ +
+
USB DEVICES
+
Firefox OS devices connected over USB. From Firefox 36 this also gets you connected to Firefox for Android over USB.
+
WI-FI DEVICES
+
Firefox OS devices connected over Wi-Fi. New in Firefox 39.
+
SIMULATORS
+
Instances of the Firefox OS Simulator that you've installed.
+
OTHER
+
Remote runtimes to connect WebIDE to an arbitrary host and port. If you have the Valence add-on installed, this section will also list the additional runtimes it enables.
+
+ +

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

+ +

การเชื่อมต่ออุปกรณ์ Firefox OS

+ +

If you have a sufficiently recent version of Firefox and Firefox OS, you can connect the Firefox OS device over WiFi. Otherwise, you must connect over USB.

+ +

การเชื่อมต่อผ่าน USB

+ +

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

+ + + +
+

เฉพาะ Linux:

+ + +
+ +
+

เฉพาะ Windows:

+ + +
+ +

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.

+ +

การเชื่อมต่อผ่าน WiFi

+ +

To connect over WiFi, you need:

+ + + +

This doesn't use ADB at all, and is therefore likely to be more reliable than the USB method.

+ +

Enable WiFi debugging

+ +

First, enable WiFi debugging on the Firefox OS device.

+ +
    +
  1. Open Developer Settings on the device (Settings -> Developer)
    2. +
  2. Check "DevTools via Wi-Fi"
    3. +
  3. Edit the device name if desired
    4. +
+ +

+ +

Select the device

+ +

In WebIDE, click the "Select Runtime" menu. You should see a section labeled "Wi-Fi Devices", and your device should appear under it:

+ +

Select your device.

+ +

Authenticate

+ +

Next, in the WebIDE you'll see a prompt with a QR code:

+ +

On the device, you'll see a connection prompt giving you options to "Scan" or "Scan and Remember". Choose one of the options and scan the QR code. Now WebIDE should connect to the device, and the device icon next to "Select Runtime" should turn blue to indicate this.

+ +

The QR code scanner can be a bit frustrating at the moment, as real devices appear to capture a very low resolution picture. Bug 1145772 aims to improve this soon. If you have trouble with this, try scanning with a few different orientations.

+ +

If you chose "Scan and Remember, then you won't have to scan the code again the next time you connect your computer to this device.

+ +

การเชื่อมต่อกับ Firefox สำหรับ 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 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 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.

+ +

Other runtimes

+ +

Remote runtime

+ +

With a 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.

diff --git "a/files/th/tools/webide/\340\270\201\340\270\262\340\270\243\340\270\227\340\271\215\340\270\262\340\270\207\340\270\262\340\270\231\340\270\243\340\271\210\340\270\247\340\270\241\340\270\201\340\270\261\340\270\232\340\270\204\340\270\255\340\270\243\340\271\214\340\271\202\340\270\224\340\270\247\340\270\262\340\271\201\340\270\255\340\270\236\340\270\236\340\270\245\340\270\264\340\271\200\340\270\204\340\270\212\340\270\261\340\271\210\340\270\231\340\271\203\340\270\231_webide/index.html" "b/files/th/tools/webide/\340\270\201\340\270\262\340\270\243\340\270\227\340\271\215\340\270\262\340\270\207\340\270\262\340\270\231\340\270\243\340\271\210\340\270\247\340\270\241\340\270\201\340\270\261\340\270\232\340\270\204\340\270\255\340\270\243\340\271\214\340\271\202\340\270\224\340\270\247\340\270\262\340\271\201\340\270\255\340\270\236\340\270\236\340\270\245\340\270\264\340\271\200\340\270\204\340\270\212\340\270\261\340\271\210\340\270\231\340\271\203\340\270\231_webide/index.html" new file mode 100644 index 0000000000..a4b5dbc4bc --- /dev/null +++ "b/files/th/tools/webide/\340\270\201\340\270\262\340\270\243\340\270\227\340\271\215\340\270\262\340\270\207\340\270\262\340\270\231\340\270\243\340\271\210\340\270\247\340\270\241\340\270\201\340\270\261\340\270\232\340\270\204\340\270\255\340\270\243\340\271\214\340\271\202\340\270\224\340\270\247\340\270\262\340\271\201\340\270\255\340\270\236\340\270\236\340\270\245\340\270\264\340\271\200\340\270\204\340\270\212\340\270\261\340\271\210\340\270\231\340\271\203\340\270\231_webide/index.html" @@ -0,0 +1,43 @@ +--- +title: การทำงานร่วมกับคอร์โดวาแอพพลิเคชั่นใน WebIDE +slug: Tools/WebIDE/การทํางานร่วมกับคอร์โดวาแอพพลิเคชั่นใน_WebIDE +translation_of: Archive/WebIDE/Working_with_Cordova_apps_in_WebIDE +--- +
+

New in Firefox 39.

+
+ +

Apache Cordova ช่วยให้คุณสามารถเขียนแอพพลิเคชั่นโดยใช้ HTML, JavaScript และ CSS และแล้วสร้างรุ่นพื้นเมืองของมันสำหรับแพลตฟอร์มโทรศัพท์มือถือเช่น iOS และ Android
+ โดยคอร์โดวา คุณยังสามารถสร้างรุ่น app ของคุณสำหรับ Firefox OS

+ +

From Firefox 39 onwards, WebIDE directly supports Cordova apps: this means that  you can edit Cordova apps in WebIDE, and WebIDE takes care of generating the Firefox OS version for you.

+ +

First, create a Cordova app, as you normally would:

+ + + + + + + +

Next:

+ + + +

Now you can edit the app as a Cordova app, and whenever you run the app, WebIDE takes care of generating the Firefox OS version behind the scenes. WebIDE also regenerates the Firefox OS version whenever you make any changes that would affect your app's manifest, so it can perform manifest validation.

diff --git "a/files/th/tools/webide/\340\270\201\340\270\262\340\270\243\340\271\200\340\270\233\340\270\264\340\270\224_webide/index.html" "b/files/th/tools/webide/\340\270\201\340\270\262\340\270\243\340\271\200\340\270\233\340\270\264\340\270\224_webide/index.html" new file mode 100644 index 0000000000..709cde4ece --- /dev/null +++ "b/files/th/tools/webide/\340\270\201\340\270\262\340\270\243\340\271\200\340\270\233\340\270\264\340\270\224_webide/index.html" @@ -0,0 +1,26 @@ +--- +title: การเปิด WebIDE +slug: Tools/WebIDE/การเปิด_WebIDE +translation_of: Archive/WebIDE/Opening_WebIDE +--- +

มีสามวิธีที่จะเปิด WebIDE ได้แก่:

+ + + +

+ +

นี่คือสิ่งที่ดูเหมือน WebIDE: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.

+ +

You can change the font size throughout WebIDE using the standard keyboard shortcuts (use Command instead of Control on OS X):

+ + -- cgit v1.2.3-54-g00ecf