diff options
Diffstat (limited to 'files/th/tools')
| -rw-r--r-- | files/th/tools/debugger/index.html | 59 | ||||
| -rw-r--r-- | files/th/tools/debugger/www.หนังโป้.com/index.html | 149 | ||||
| -rw-r--r-- | files/th/tools/eyedropper/index.html | 42 | ||||
| -rw-r--r-- | files/th/tools/index.html | 218 | ||||
| -rw-r--r-- | files/th/tools/webide/index.html | 42 | ||||
| -rw-r--r-- | files/th/tools/webide/troubleshooting/index.html | 117 | ||||
| -rw-r--r-- | files/th/tools/webide/การตั้งค่ารันไทม์/index.html | 161 | ||||
| -rw-r--r-- | files/th/tools/webide/การทํางานร่วมกับคอร์โดวาแอพพลิเคชั่นใน_webide/index.html | 43 | ||||
| -rw-r--r-- | files/th/tools/webide/การเปิด_webide/index.html | 26 |
9 files changed, 857 insertions, 0 deletions
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 +--- +<div>{{ToolsSidebar}}</div> + +<p>The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.</p> + +<p>{{EmbedYouTube("QK4hKWmJVLo")}}</p> + +<p>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 <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>to learn how to connect the debugger to a remote target.</p> + +<p>To find your way around the debugger, here's a <a href="/en-US/docs/Tools/Debugger/UI_Tour">quick tour of the UI</a>.</p> + +<h2 id="How_to">How to</h2> + +<p>To find out what you can do with the debugger, see the following how-to guides:</p> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Open_the_debugger">Open the debugger</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Set a breakpoint</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Set a conditional breakpoint</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Set_an_XHR_breakpoint">Set an XHR breakpoint</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Set_a_logpoint">Set a logpoint</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Set_event_listener_breakpoints">Set event listener breakpoints</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">Disable breakpoints</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code">Step through code</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Breaking_on_exceptions">Break on exceptions</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Set_Watch_Expressions">Set watch expressions</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Debug_worker_threads">Debug worker threads</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">Pretty-print a minified file</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Search">Search</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">Debug eval sources</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">Use a source map</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Use_watchpoints">Use watchpoints</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Break_on_DOM_mutation">Break on DOM Mutation</a></li> +</ul> +</div> + +<hr> +<h2 id="Reference">Reference</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Debugger/Keyboard_shortcuts">Keyboard shortcuts</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Source_map_errors">Source map errors</a></li> +</ul> +</div> diff --git a/files/th/tools/debugger/www.หนังโป้.com/index.html b/files/th/tools/debugger/www.หนังโป้.com/index.html new file mode 100644 index 0000000000..a4c0bcf086 --- /dev/null +++ b/files/th/tools/debugger/www.หนังโป้.com/index.html @@ -0,0 +1,149 @@ +--- +title: หนังโป้ +slug: Tools/Debugger/www.หนังโป้.com +translation_of: Tools/Debugger/UI_Tour +--- +<div>{{ToolsSidebar}}</div> + +<p>บทความนี้แนะนำโดยย่อเกี่ยวกับส่วนหลักของส่วนต่อประสานผู้ใช้ JavaScript Debugger UI ถูกแบ่งออกเป็นสามส่วนในแนวตั้ง</p> + +<ul> + <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">บานหน้าต่างรายการแหล่งที่มา</a></li> + <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">บานหน้าต่างแหล่งที่มา</a></li> + <li>เนื้อหาของบานหน้าต่างที่สามขึ้นอยู่กับสถานะปัจจุบันของดีบักเกอร์และอาจรวมถึงส่วนต่อไปนี้: + <ul> + <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Toolbar">แถบเครื่องมือ</a></li> + <li>รับชมการแสดงออก</li> + <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Breakpoints_list">จุดพัก</a></li> + <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Call_stack">เรียกสแตก</a></li> + <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Scopes">ขอบเขต</a></li> + <li>XHR</li> + <li>จุดพักการฟังเหตุการณ์</li> + <li>การเปลี่ยนสายพันธุ์ของ DOM</li> + </ul> + </li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16840/debugger_uiTour_01.png" style="border: 1px solid black; display: block; height: 598px; margin-left: auto; margin-right: auto; width: 922px;"></p> + +<h2 id="บานหน้าต่างรายการแหล่งที่มา">บานหน้าต่างรายการแหล่งที่มา</h2> + +<p>บานหน้าต่างรายการแหล่งข้อมูลจะแสดงรายการไฟล์ต้นฉบับ JavaScript ทั้งหมดที่โหลดลงในหน้าและช่วยให้คุณสามารถเลือกหนึ่งไฟล์ที่จะดีบั๊กที่แหล่งข้อมูลระดับบนสุดจะถูกจัดระเบียบโดยแหล่งกำเนิดและภายใต้ว่าพวกเขาจัดระเบียบ โดยโครงสร้างที่พวกเขาจะให้บริการ</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16841/debugger_uiTour_02.png" style="border: 1px solid black; display: block; height: 598px; margin-left: auto; margin-right: auto; width: 922px;"></p> + +<p>คุณสามารถ<a href="/en-US/docs/Tools/Debugger/How_to/Search#Searching_for_files">ค้นหาไฟล์</a>โดยใช้<kbd>Ctrl</kbd>+ <kbd>P</kbd>( <kbd>Cmd</kbd>+ <kbd>P</kbd>บน Mac)</p> + +<p>ส่วนขยายของเว็บจะแสดงรายการในบานหน้าต่างรายการแหล่งที่มาโดยใช้ชื่อส่วนขยาย</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16868/source_list_pane.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 373px;"></p> + +<p>มีตัวเลือกเมนูหลายไฟล์และโฟลเดอร์หรือกลุ่มโดยทั่วไปแล้วจะดูได้โดยคลิกขวาที่รายการ</p> + +<p>สำหรับไฟล์ตัวเลือกเมนูบริบทต่อไปนี้จะมีให้ใช้งาน:</p> + +<p><img alt="สกรีนช็อตแสดงตัวเลือกเมนูบริบทสำหรับไฟล์ในบานหน้าต่างรายการแหล่งที่มา" src="https://mdn.mozillademos.org/files/17200/debugger-source-list-file-menu.png" style="height: 205px; width: 298px;"></p> + +<ul> + <li><strong>คัดลอก URI ของแหล่งที่มาคัดลอก</strong>ตัวระบุแบบเต็มของไฟล์ไปยังคลิปบอร์ด</li> + <li><strong>แหล่งที่มาของ Blackbox</strong>ทำให้โปรแกรมดีบั๊กข้ามไฟล์เมื่อฟังก์ชั่น "เข้าสู่" สิ่งนี้มีประโยชน์ในการหลีกเลี่ยงการเข้าไปในห้องสมุดที่โค้ดของคุณใช้ เมื่อไฟล์เป็น "blackboxed" ไฟล์นั้นจะมีไอคอนรูปตาเล็ก ๆ อยู่ข้างๆแทนไฟล์ของไอคอนปกติ</li> + <li><strong>ไฟล์ดาวน์โหลดจะ</strong>เปิดกล่องโต้ตอบไฟล์เพื่อให้คุณสามารถบันทึกไฟล์ไว้ในเครื่องได้</li> +</ul> + +<p>สำหรับโฟลเดอร์และกลุ่มมีตัวเลือกเมนูบริบทต่อไปนี้:</p> + +<p><img alt="สกรีนช็อตแสดงตัวเลือกเมนูบริบทสำหรับโฟลเดอร์ในบานหน้าต่างรายการแหล่งที่มา" src="https://mdn.mozillademos.org/files/17201/debugger-source-list-folder-menu.png" style="height: 203px; width: 536px;"></p> + +<ul> + <li><strong>ยุบทั้งหมด</strong>ยุบโฟลเดอร์ย่อยทั้งหมดของรายการ</li> + <li><strong>ขยายทั้งหมด</strong>ขยายโฟลเดอร์ย่อยทั้งหมดของรายการ</li> + <li><strong>ตั้งค่าไดเรกทอรีราก</strong>เปลี่ยนมุมมองรายการแหล่งที่มาเพื่อให้เห็นเฉพาะรายการและรายการย่อย ชื่อของไดเรกทอรีที่เลือกจะแสดงที่ด้านบนของบานหน้าต่างรายการแหล่งที่มา การคลิกที่ชื่อนี้จะเปลี่ยนเป็นบานหน้าต่างเพื่อแสดงรายการที่มาทั้งหมด</li> + <li><strong>Blackbox</strong> (ตั้งแต่ Firefox 76) + <ul> + <li><strong>ไฟล์ Blackbox ในไดเรกทอรีนี้</strong>ทำให้ไฟล์ทั้งหมดในไดเรกทอรีที่เลือกถูกข้ามโดยดีบักเกอร์ ไฟล์ลูกทั้งหมดได้รับไอคอนรูปดวงตาและตัวเลือกเมนูโฟลเดอร์จะเปลี่ยนเป็น<strong>ไฟล์ Unblackbox ในไดเรกทอรี</strong>นี้</li> + <li><strong>ไฟล์ Blackbox ที่อยู่นอกไดเรกทอรีนี้</strong>ทำให้ไฟล์ทั้งหมดนอกเหนือจากที่อยู่ในไดเรกทอรีที่เลือกถูกข้ามโดยตัวดีบั๊ก ไฟล์ดังกล่าวทั้งหมดจะได้รับไอคอนรูปดวงตาและตัวเลือกเมนูสำหรับโฟลเดอร์นั้นจะเปลี่ยนเป็น<strong>ไฟล์ Unblackbox นอกไดเรกทอรี</strong>นี้</li> + </ul> + </li> +</ul> + +<h3 id="มุมมองโครงร่าง">มุมมองโครงร่าง</h3> + +<p>มุมมองโครงร่างแสดงแผนผังสำหรับการนำทางไฟล์ที่เปิดอยู่ในปัจจุบัน ใช้เพื่อข้ามไปยังนิยามฟังก์ชันคลาสหรือเมธอดโดยตรง</p> + +<h2 id="บานหน้าต่างแหล่งที่มา">บานหน้าต่างแหล่งที่มา</h2> + +<p>นี่แสดงไฟล์ JavaScript ที่โหลดอยู่ในปัจจุบัน</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16843/debugger_uiTour_02.5.png" style="border: 1px solid black; display: block; height: 598px; margin-left: auto; margin-right: auto; width: 922px;">เมื่อบานหน้าต่างต้นทางมุ่งเน้นคุณสามารถ<a href="/en-US/docs/Tools/Debugger/How_to/Search#Searching_within_a_file">ค้นหาสตริงในไฟล์</a>โดยใช้<kbd>Ctrl</kbd>+ <kbd>F</kbd>( <kbd>Cmd</kbd>+ <kbd>F</kbd>บน Mac)</p> + +<p><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Breakpoints</a> have a blue arrow overlaid on the line number. <a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Conditional breakpoints</a> 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:</p> + +<ul> + <li>line 82 has a normal breakpoint and execution is paused here</li> + <li>line 85 has a logpoint which logs the contents of tablerow to the console</li> + <li>line 100 has a conditional breakpoint</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16842/debugger_uiTour_03.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;"></p> + +<p>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.</p> + +<h2 id="Toolbar"><a name="toolbar">Toolbar</a></h2> + +<p>At the top of the right-hand pane, there's a toolbar:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16844/debugger_toolbar.png" style="display: block; height: 126px; margin-left: auto; margin-right: auto; width: 236px;"></p> + +<p>The toolbar consists of:</p> + +<ul> + <li>Four buttons to <a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code">control the debugger's movement through the script</a>: + + <ul> + <li><strong>Play/pause</strong> (F8): pauses or resumes execution of the script you're debugging. When it displays a "play" icon, that means the script is paused, either because you've paused it with this button or because you've hit a breakpoint.</li> + <li><strong>Step over</strong> (F10): steps across the current line of JavaScript code.</li> + <li><strong>Step in</strong> (F11): steps into the function call on the current line of JavaScript code.</li> + <li><strong>Step out</strong> (Shift-F11): runs the script until the current function exits.</li> + </ul> + </li> + <li>a button that can be used to deactivate all breakpoints</li> +</ul> + +<h2 id="Breakpoints_list">Breakpoints list</h2> + +<p>Under the toolbar, you'll see all the breakpoints you've set. Next to each breakpoint is a checkbox which you can use to <a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">enable/disable it</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16845/debugger_uiTour_breakpoints.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;"></p> + +<h2 id="Watch_expressions">Watch expressions</h2> + +<p>You can add watch expressions in the right pane. They will be evaluated when code execution is paused:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14845/watch-expressions.png" style="display: block; height: 769px; margin-left: auto; margin-right: auto; width: 504px;"></p> + +<h2 id="Variable_tooltip">Variable tooltip</h2> + +<p>Hover on a variable show a tooltip with its value inside:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14851/tooltip-1.gif" style="display: block; height: 522px; margin-left: auto; margin-right: auto; width: 988px;"></p> + +<h2 id="Call_stack">Call stack</h2> + +<p>When the debugger's paused, you'll see a call stack:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16846/debugger_uiTour_call_stack.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;">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.</p> + +<p>Right-clicking in the call stack pane opens a context menu with the following items:</p> + +<ul> + <li><strong>เปิดใช้งานการจัดกลุ่มเฟรมเวิร์ก</strong>รวบรวมรายการที่เป็นของเฟรมเวิร์กลงในกลุ่มที่ยุบได้ (ตัวอย่างเช่น jQuery ในภาพหน้าจอด้านบน) เมื่อเปิดใช้งานการจัดกลุ่มตัวเลือกเมนูจะเปลี่ยนเป็น<strong>ปิดใช้งานการจัดกลุ่มเฟรมเวิร์</strong>ก</li> + <li><strong>คัดลอก URI ต้นทางคัดลอก</strong>ตัวระบุแบบเต็มของไฟล์ต้นฉบับไปยังคลิปบอร์ด</li> + <li><strong>แหล่งที่มาของ Blackbox</strong>ทำให้โปรแกรมดีบั๊กข้ามไฟล์เมื่อฟังก์ชั่น "เข้าสู่" สแต็กเฟรมใด ๆ จากไฟล์ต้นฉบับ blackboxed จะถูกซ่อนในบานหน้าต่างการโทรสแต็ก (หากต้องการลบข้อ จำกัด นี้ให้เลือก<strong>แหล่ง Unblackbox</strong>ในเมนูบริบทของรายการแหล่งข้อมูลหรือบานหน้าต่างแหล่งที่มา)</li> + <li><strong>คัดลอกการติดตามสแต็กคัดลอก</strong>รายการทั้งหมดในสแตกการโทร (รวมถึง URIs และหมายเลขบรรทัด) ไปยังคลิปบอร์ด</li> +</ul> + +<h2 id="ขอบเขต">ขอบเขต</h2> + +<p>คุณจะเห็นป้ายชื่อ "ขอบ" พร้อมลูกศรซ่อนอยู่หลังป้ายชื่อตัวละครที่ซ่อนอยู่ในตอนท้ายของโปรแกรม:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16847/debugger_uiTour_scopes.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;">ภาชนะที่ถูกจัดเรียงตามขอบ: ส่วนใหญ่จะขึ้นก่อนหน้านี้และวงกลมใหญ่ทั่วโลก</p> 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 +--- +<div class="geckoVersionNote"> +<p><font><font>Eyedropper ใหม่ใน Firefox 31</font></font></p> +</div> + +<p><font><font>เครื่องมือ Eyedropper ช่วยให้คุณสามารถเลือกสีที่มีในหน้าปัจจุบัน </font><font>มันทำงานเหมือนแว่นขยายทั่วหน้าช่วยให้คุณสามารถเลือกที่มีความแม่นยำพิกเซล </font><font>ภายใต้แว่นขยายจะแสดงค่าสีสำหรับพิกเซลปัจจุบันโดยใช้รูปแบบใดก็ตามที่คุณได้เลือกไว้ใน</font></font><a href="/en-US/docs/Tools_Toolbox#Inspector"><font><font>การตั้งค่า</font></font></a><font><font> :</font></font></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7749/eyedropper.png" style="display: block; height: 204px; margin-left: auto; margin-right: auto; width: 305px;"><font><font>คุณสามารถใช้มันในหนึ่งในสองวิธี:</font></font></p> + +<ul> + <li><font><font>เพื่อเลือกสีจากหน้าและคัดลอกไปยังคลิปบอร์ด</font></font></li> + <li><font><font>การเปลี่ยนแปลงค่าสีในกฎของสารวัตรดูสีที่คุณเลือกจากหน้า</font></font></li> +</ul> + +<h2 id="คัดลอกสีไปยังคลิปบอร์ด"><font><font>คัดลอกสีไปยังคลิปบอร์ด</font></font></h2> + +<p><font><font>เปิด Eyedropper ในหนึ่งในสองวิธี:</font></font></p> + +<ul> + <li><font><font>เลือก "Eyedropper" ภายใต้เมนู "Web Developer"</font></font></li> + <li><font><font>คลิกปุ่ม Eyedropper ใน</font></font><a href="/en-US/docs/Tools_Toolbox#Toolbar"><font><font>แถบเครื่องมือกล่องเครื่องมือ</font></font></a><font><font> (แต่ทราบว่าปุ่มนี้ไม่อยู่โดยค่าเริ่มต้น: คุณจำเป็นต้องเพิ่มโดยการตรวจสอบ "คว้าสีจากหน้า" ใน</font></font><a href="/en-US/docs/Tools_Toolbox#Settings"><font><font>การตั้งค่าเครื่องมือสำหรับนักพัฒนา</font></font></a><font><font> )</font></font></li> +</ul> + +<p><font><font>ขณะที่คุณเลื่อนเมาส์ไปรอบ ๆ หน้าคุณจะเห็นค่าสีในปัจจุบันในการเปลี่ยนแปลง Eyedropper </font><font>คลิกสำเนาค่าสีในปัจจุบันไปยังคลิปบอร์ด</font></font></p> + +<p><font><font>{{EmbedYouTube ("xf2uk6UyRB8")}}</font></font></p> + +<h2 id="การเปลี่ยนค่าสีในมุมมองกฎ"><font><font>การเปลี่ยนค่าสีในมุมมองกฎ</font></font></h2> + +<p><font><font>ค่าสีที่ปรากฏในกฎของสารวัตรดูมีตัวอย่างสีไปให้พวกเขา: คลิกตัวอย่างที่แสดงให้เห็น</font></font><a href="/en-US/docs/Tools/Page_Inspector#Color_picker"><font><font>ป๊อปอัพตัวเลือกสี </font></font></a><font><font>จาก Firefox 31 ป๊อปอัพที่มีไอคอน Eyedropper: คลิกที่ไอคอนนี้เพื่อเปิดใช้ Eyedropper</font></font></p> + +<p><font><font>ตอนนี้เมื่อคุณคลิก Eyedropper สีในมุมมองกฎที่ถูกกำหนดให้เป็นสีที่คุณเลือก</font></font></p> + +<p><font><font>{{EmbedYouTube ("0Zx1TN21QOo")}}</font></font></p> + +<h2 id="แป้นพิมพ์ลัด"><font><font>แป้นพิมพ์ลัด</font></font></h2> + +<p><font><font>{{Page ("</font></font>en-US/docs/tools/Keyboard_shortcuts<font><font>", "Eyedropper")}}</font></font></p> 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 +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">Examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile.</p> + +<p>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.</p> + +<p>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 <a href="/en-US/docs/Tools#Join_the_Developer_tools_community">community links near the bottom of the page</a>). If you have any feedback or questions specifically about the documentation, the <a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> is a good place to post.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are just getting started with web development and using developer tools, our <a href="/en-US/docs/Learn">learning web development</a> docs will help you — see <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> and <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a> for good starting points.</p> +</div> + +<h2 id="The_Core_Tools">The Core Tools</h2> + +<p>You can open the Firefox Developer Tools from the menu by selecting <em>Tools</em> > <em>Web Developer</em> > <em>Toggle Tools</em> or use the keyboard shortcut <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd> on Windows and Linux, or <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> on macOS.</p> + +<p>The ellipsis menu on the right-hand side of Developer Tools, contains several commands that let you perform actions or change tool settings.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="display: block; height: 290px; margin: 0 auto; width: 225px;"></p> + +<table class="standard-table" style="height: 178px; width: 840px;"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td> + <td>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.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td> + <td>Click this button to take a screenshot of the current page. (<strong>Note:</strong> This feature is not turned on by default and must be enabled in settings before the icon will appear.)</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td> + <td>Toggles Responsive Design Mode.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td> + <td>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.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td> + <td>Closes the Developer Tools</td> + </tr> + </tbody> +</table> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Page_Inspector">Page Inspector</h3> + +<p><a href="/en-US/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>View and edit page content and layout. Visualise many aspects of the page including the box model, animations, and grid layouts.</p> +</div> + +<div class="column-half"> +<h3 id="Web_Console">Web Console</h3> + +<p><a href="/en-US/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>See messages logged by a web page and interact with the page using JavaScript.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="JavaScript_Debugger">JavaScript Debugger</h3> + +<p><a href="/en-US/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Stop, step through, examine, and modify the JavaScript running in a page.</p> +</div> + +<div class="column-half"> +<h3 id="Network_Monitor">Network Monitor</h3> + +<p><a href="/en-US/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>See the network requests made when a page is loaded.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Performance_Tools">Performance Tools</h3> + +<p><a href="/en-US/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Analyze your site's general responsiveness, JavaScript, and layout performance.</p> +</div> + +<div class="column-half"> +<h3 id="Responsive_Design_Mode">Responsive Design Mode</h3> + +<p><a href="/en-US/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>See how your website or app will look and behave on different devices and network types.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Accessibility_inspector">Accessibility inspector</h3> + +<p><a href="/en-US/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Provides a means to access the page's accessibility tree, allowing you to check what's missing or otherwise needs attention.</p> +</div> + +<div class="column-half"></div> +</div> + +<div class="note"> +<p><strong>Note</strong>: The collective term for the UI inside which the DevTools all live is the <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>.</p> +</div> + +<h2 id="More_Tools">More Tools</h2> + +<p>These developer tools are also built into Firefox. Unlike the "Core Tools" above, you might not use them every day.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Memory">Memory</a></dt> + <dd>Figure out which objects are keeping memory in use.</dd> + <dt><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></dt> + <dd>Inspect cookies, local storage, indexedDB, and session storage present in a page.</dd> + <dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></dt> + <dd>Inspect the page's DOM properties, functions, etc.</dd> + <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt> + <dd>Select a color from the page.</dd> + <dt><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></dt> + <dd>A text editor built into Firefox that lets you write and execute JavaScript.</dd> + <dt><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></dt> + <dd>View and edit CSS styles for the current page.</dd> + <dt><a href="/en-US/docs/Tools/Screenshot_tool">Taking screenshots</a></dt> + <dd>Take a screenshot of the entire page or of a single element.</dd> + <dt><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">Measure a portion of the page</a></dt> + <dd>Measure a specific area of a web page.</dd> + <dt><a href="/en-US/docs/Tools/Rulers">Rulers</a></dt> + <dd>Overlay horizontal and vertical rulers on a web page</dd> +</dl> +</div> + +<div class="column-container"> +<div class="column-third"> +<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p> + +<p style="text-align: center;">For the latest developer tools and features, try Firefox Developer Edition.</p> + +<p><a href="https://www.mozilla.org/en-US/firefox/developer/" style="width: 300px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox Developer Edition</a></p> +</div> + +<div class="column-third"></div> +</div> + +<h2 id="Connecting_the_Developer_Tools">Connecting the Developer Tools</h2> + +<p>If you open the developer tools using <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">keyboard shortcuts</a> 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.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt> + <dd>Debug add-ons, content tabs, and workers running in the browser.</dd> + <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Connecting to Firefox for Android</a></dt> + <dd>Connect the developer tools to an instance of Firefox running on an Android device.</dd> + <dt><a href="/en-US/docs/Tools/Working_with_iframes">Connecting to iframes</a></dt> + <dd>Connect the developer tools to a specific iframe in the current page.</dd> + <dt><a href="/en-US/docs/Tools/Valence">Connecting to other browsers</a></dt> + <dd>Connect the developer tools to Chrome on Android and Safari on iOS.</dd> +</dl> +</div> + +<h2 id="Debugging_the_browser">Debugging the browser</h2> + +<p>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.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt> + <dd>See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.</dd> + <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt> + <dd>Attach the Developer Tools to the browser itself.</dd> +</dl> +</div> + +<h2 id="Extending_the_devtools">Extending the devtools</h2> + +<p>For information on extending the Firefox DevTools, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a> over in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">Browser Extensions</a> section of MDN.</p> + +<h2 id="Migrating_from_Firebug">Migrating from Firebug</h2> + +<p>Firebug has come to the end of its lifespan (see <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug lives on in Firefox DevTools</a> 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 — <a href="/en-US/docs/Tools/Migrating_from_Firebug">Migrating from Firebug</a>.</p> + +<h2 id="Contribute">Contribute</h2> + +<p>If you want to help improve the developer tools, these resources will get you started.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="https://docs.firefox-dev.tools/">Get Involved</a></dt> + <dd>Our developer documentation explains how to get involved.</dd> + <dt><a href="http://bugs.firefox-dev.tools/">bugs.firefox-dev.tools</a></dt> + <dd>A tool helping to find bugs to work on.</dd> +</dl> +</div> 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 +--- +<div class="summary"> +<p><span id="result_box" lang="th"><span class="hps">WebIDE</span> <span class="hps">ช่วยให้คุณสามารถ</span><span>สร้าง, แก้ไข,</span> <span class="hps">ทำงานและ</span><span>การแก้ปัญหา</span><span class="alt-edited">แอพพลิเคชั่น</span><span>เว็บ</span></span> <span class="short_text" id="result_box" lang="th"><span class="hps">โดยใช้</span></span> <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> <span class="short_text" id="result_box" lang="th"><span class="hps">หรือ</span><span>อุปกรณ์ </span><span class="hps">Firefox</span> <span class="hps">OS </span></span><span class="short_text" lang="th"><span>จริง</span> </span></p> + +<p><span class="short_text" id="result_box" lang="th"><span class="hps">นอกจากนี้ยัง</span><span>ช่วยให้คุณสามารถ</span><span>เชื่อมต่อ</span></span> <a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox Developer Tools</a> <span id="result_box" lang="th"><span class="hps">ไปยัง</span><span>เบราว์เซอร์</span><span>อื่น ๆ</span> <span class="hps">รวมทั้ง</span> <span class="hps">Firefox สำหรับ</span> <span class="hps">Android,</span> <span class="hps">Chrome บน</span> <span class="hps">Android,</span> <span class="hps">และ Safari</span> <span class="hps">บน iOS</span></span><br> + โปรดดู <span id="result_box" lang="th"><span class="hps">หน้า</span></span> <a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> <span id="result_box" lang="th"><span>สำหรับคำแนะนำ</span><span>เกี่ยวกับวิธีการ</span><span>เชื่อมต่อกับ</span><span>เบราว์เซอร์</span><span>ที่เฉพาะเจาะจง</span></span></p> +</div> + +<p>With WebIDE, you first <a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes">set up one or more runtimes</a>. 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 <a href="/en-US/Firefox/Releases/39">Firefox 39</a>), or it could be a Firefox OS Simulator installed on the desktop itself.</p> + +<p>Next, you <a href="/en-US/docs/Tools/WebIDE/Creating_and_editing_apps">create an app, or open an existing app</a>. 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.</p> + +<p>Finally, you can <a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps">install the app in one of the runtimes and run it</a>. You can then open the usual suite of developer tools - the <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Console</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger">JavaScript Debugger</a> and so on - to examine and modify the running app.</p> + +<hr> +<dl> + <dt><a href="/th/docs/Tools/WebIDE/การเปิด_WebIDE">การเปิด WebIDE</a></dt> + <dd><span class="short_text" id="result_box" lang="th"><span class="hps">วิธีการเปิด</span> <span class="hps">WebIDE</span> <span class="hps">จากภายใน</span> <span class="hps">Firefox</span></span></dd> + <dt><a href="/th/docs/Tools/WebIDE/การตั้งค่ารันไทม์">การตั้งค่ารันไทม์</a></dt> + <dd><span id="result_box" lang="th"><span class="hps">วิธีการ</span><span>เชื่อมต่อกับ</span><span>รันไทม์</span><span>ในที่ที่คุณ</span><span>สามารถติดตั้ง</span><span class="alt-edited">แอพพลิเคชั่น</span><span>รวมทั้ง</span><span>อุปกรณ์</span> <span class="hps">Firefox</span> <span class="hps">OS,</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">Simulator</span><span>,</span> <span class="hps">และ Firefox</span> <span class="hps">สำหรับ Android</span></span></dd> + <dt><a href="/th/docs/Tools/WebIDE/การสร้างและการแก้ไขแอพพลิเคชั่น">การสร้างและการแก้ไขแอพพลิเคชั่น</a></dt> + <dd><span class="short_text" id="result_box" lang="th"><span class="hps">วิธีการ</span><span> สร้าง เปิด</span><span> และพัฒนา</span><span class="alt-edited">แอพพลิเคชั่น โดย</span><span>ใช้</span> <span class="hps">WebIDE</span></span></dd> + <dt><a href="/th/docs/Tools/WebIDE/การทำงานและการแก้จุดบกพร่องแอพพลิเคชั่น">การทำงานและการแก้จุดบกพร่องแอพพลิเคชั่น</a></dt> + <dd><span id="result_box" lang="th"><span class="hps">วิธีการติดตั้ง</span></span><span class="short_text" id="result_box" lang="th"><span class="alt-edited">แอพพลิเคชั่น</span></span><span lang="th"><span>รันไทม์</span><span>และ</span><span>แก้ปัญหา</span><span>โดยใช้</span> <span class="hps">Firefox</span> <span class="hps">เครื่องมือสำหรับนักพัฒนา</span></span></dd> + <dt><a href="/th/docs/Tools/WebIDE/การทำงานร่วมกับคอร์โดวาแอพพลิเคชั่นใน_WebIDE">การทำงานร่วมกับคอร์โดวาแอพพลิเคชั่นใน WebIDE</a></dt> + <dd><span id="result_box" lang="th"><span class="hps">จาก</span> <span class="hps">Firefox</span> <span class="hps">39,</span> <span class="hps">คุณสามารถแก้ไข</span><span>และการแก้ปัญหา</span><span>คอร์โดวา</span><span class="alt-edited">แอพพลิเคชั่น</span><span>ที่ใช้</span> <span class="hps">WebIDE</span></span></dd> + <dt><a href="/th/docs/Tools/WebIDE/Troubleshooting">การแก้ไขปัญหา </a></dt> + <dd><span id="result_box" lang="th"><span class="hps">ความช่วยเหลือสำหรับ</span><span>ปัญหาเกี่ยวกับ</span> <span class="hps">WebIDE</span> <span class="hps">โดยเฉพาะอย่างยิ่ง</span><span>ปัญหา</span><span>การเชื่อมต่อกับ</span><span>รันไทม์</span></span></dd> +</dl> 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 +--- +<h2 id="การเชื่อมต่ออุปกรณ์_Firefox_OS_ผ่าน_USB"><span class="short_text" id="result_box" lang="th"><span class="hps">การเชื่อมต่ออุปกรณ์</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">ผ่าน USB</span></span></h2> + +<p><span id="result_box" lang="th"><span class="hps">ถ้าคุณ</span><span>กำลังพยายามที่จะ</span><span>เชื่อมต่ออุปกรณ์</span> <span class="hps">Firefox</span> <span class="hps">OS เพื่อ</span> <span class="hps">WebIDE</span> <span class="hps">และ มันไม่</span><span>แสดงขึ้น</span></span> <span class="short_text" id="result_box" lang="th"><span class="hps">นี่คือบาง</span><span>สิ่งที่คุณสามารถ</span><span>ลองทำ:</span></span></p> + +<ul> + <li><font><font>ตรวจสอบรุ่นของ Firefox OS: ให้แน่ใจว่าอุปกรณ์ของคุณใช้</font></font><strong><font><font>Firefox OS 1.2 / Boot2Gecko 1.2 </font></font></strong><font><font>หรือสูงกว่า </font></font><code>Device Information > Software</code><font><font>การตรวจสอบรุ่นไปที่แอปการตั้งค่าบนอุปกรณ์แล้ว</font><font> </font><font>ถ้าคุณไม่มีเวอร์ชันที่สูงพอให้ค้นหาอุปกรณ์ของคุณใน</font></font><a href="/en-US/Firefox_OS/Developer_phone_guide"><font><font>คู่มือสำหรับนักพัฒนาซอฟต์แวร์</font></font></a><font><font>และทำตามคำแนะนำในการอัปเกรด</font></font></li> + <li><font><font>เปิดใช้งานการแก้จุดบกพร่องระยะไกล: </font></font><code>Device information > More information > Developer</code><font><font>ในแอปตั้งค่าบนอุปกรณ์ให้ไปที่</font></font> + <ul> + <li><font><font>Firefox OS 1.3 ขึ้นไป: "Remote Debugging" เป็นเพียงช่องทำเครื่องหมายง่ายๆ </font><font>ทำเครื่องหมายในช่อง</font></font></li> + <li><font><font>Firefox OS 1.4 ขึ้นไป: "Remote Debugging" จะขอให้คุณเปิดใช้งานเฉพาะ ADB หรือ ADB และ DevTools </font><font>เลือก "ADB และ DevTools"</font></font></li> + </ul> + </li> + <li><font><font>ปิดใช้งานการล็อกหน้าจอในอุปกรณ์ของคุณ: ในแอปการตั้งค่าบนอุปกรณ์ให้ไปที่</font></font><code>Screen Lock</code><font><font>และยกเลิกการ</font></font><code>Lock Screen</code><font><font>เลือกช่องทำเครื่องหมาย </font><font>นี่เป็นวิธีที่ดีเพราะเมื่อหน้าจอถูกล็อคการเชื่อมต่อโทรศัพท์สูญหายซึ่งหมายความว่าจะไม่สามารถแก้ปัญหาได้อีกต่อไป</font></font></li> + <li><font><font>ตรวจสอบว่าคุณไม่ได้เชื่อมต่อโทรศัพท์ Android พร้อมกับโทรศัพท์ระบบปฏิบัติการ Firefox ในคอมพิวเตอร์ของคุณ</font></font></li> + <li>Check the USB cable you are using:เปลี่ยนการกระทำทุกอย่างเป็นภาษา ไทย + <p> </p> + + <ul> + <li><font><font>ลองถอดปลั๊กและเสียบสายเคเบิล USB อีกครั้ง</font></font></li> + <li><font><font>ลองเสียบสาย USB เข้ากับพอร์ตอื่นในคอมพิวเตอร์ของคุณ </font><font>คุณอาจต้องสลับระหว่างพอร์ต</font></font></li> + <li><font><font>ลองใช้สาย USB อื่น </font><font>สายที่มากับโทรศัพท์มักมีคุณภาพไม่ดีและมักล้มเหลว</font></font></li> + <li><font><font>ลองใช้สายเคเบิล USB ที่สั้นกว่า </font><font>สาย USB ยาวได้รับทราบว่าไม่ทำงานได้ดี</font></font></li> + </ul> + </li> + <li><font><font>ลองปิดใช้งานและเปิดใช้งานการแก้ไขปัญหาระยะไกลอีกครั้งในแอปการตั้งค่าบนอุปกรณ์</font></font></li> + <li><font><font>ถ้า</font></font><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes"><font><font>คุณปิดการใช้งาน ADB Addon Helper</font></font></a><font><font>คุณทำสำเร็จ</font></font><code>adb forward</code><font><font>หรือไม่?</font></font></li> + <li><font><font>ถ้าคุณใช้ Linux:</font></font> + <ul> + <li><font><font>ให้แน่ใจว่าคุณเพิ่ม</font></font><code>udev</code><font><font>ไฟล์กฎตามที่บันทึกไว้ในขั้นตอนที่ 3 ของคู่มือนี้เพื่อ</font><font>ตั้งค่าอุปกรณ์</font></font><a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up"><font><font> Android </font></font></a><code>idVendor</code><font><font>แอตทริบิวต์ที่จะใช้สำหรับ Geeksphone คือ "05c6" และ</font></font><a class="external external-icon" href="http://developer.android.com/tools/device.html#VendorIds"><font><font>หน้านี้</font></font></a><font><font>รายการอื่น ๆ</font></font><code>idVendor</code><font><font>ค่า </font><font>จากนั้นให้เรียกใช้</font></font><code>adb devices</code><font><font>เพื่อให้แน่ใจว่าอุปกรณ์ของคุณอยู่ในรายการ </font><font>หากอุปกรณ์ดูเหมือนจะเป็น "no permission" คุณต้องรีสตาร์ทเซิร์ฟเวอร์ adb (เช่น</font></font><code>adb kill-server;adb start-server</code><font><font>)</font></font></li> + </ul> + </li> + <li><font><font>ถ้าคุณใช้ Windows:</font></font> + <ul> + <li><font><font>คุณจำเป็นต้องติดตั้งไดรเวอร์เป็นเอกสารในขั้นตอนที่ 3 ของคู่มือนี้เพื่อ</font><font>ตั้งค่าอุปกรณ์</font></font><a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up"><font><font> Android </font></font></a><font><font>คุณสามารถค้นหาไดรเวอร์สำหรับอุปกรณ์ Geeksphone บน</font></font><a class="external external-icon" href="http://downloads.geeksphone.com/"><font><font>เว็บไซต์ Geeksphone</font></font></a><font><font>และไดรเวอร์สำหรับอุปกรณ์ของ Google บน</font><font>เว็บไซต์ของ</font></font><a href="http://developer.android.com/sdk/win-usb.htm"><font><font> Google </font></font></a><font><font>Windows 8 เป็นค่าเริ่มต้นจะไม่ให้คุณติดตั้งโปรแกรมควบคุมที่ไม่ได้ลงชื่อ </font><font>ดูการกวดวิชานี้เกี่ยวกับ</font></font><a class="external-icon external" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html"><font><font>"วิธีการติดตั้งโปรแกรมควบคุมที่ไม่ได้ลงนามใน Windows </font></font></a><font><font>8"</font></font></li> + <li><font><font>หาก WebIDE ไม่สามารถดูอุปกรณ์ของคุณหลังจากทำตามขั้นตอนทั้งหมดที่คุณอาจต้อง</font></font><a class="external-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182"><font><font>แก้ไข </font></font></a><font><font>adb_usb.ini</font></font></li> + </ul> + </li> + <li><font><font>หากคุณใช้ Mac OS X:</font></font> + <ul> + <li><font><font>หากคุณได้รับข้อผิดพลาดเกี่ยวกับการหมดเวลาที่เชื่อมต่อกับอุปกรณ์จำลองและอุปกรณ์จริงคุณอาจไม่สามารถเชื่อมต่อกับ localhost เนื่องจากไฟล์ว่าง / etc / hosts </font><font>คุณสามารถแก้ปัญหาได้โดยประชากรของไฟล์และล้างแคช DNS </font><font>ตามที่อธิบายไว้ที่นี่</font></font></li> + <li><font><font>หากคุณเป็นผู้ใช้ EasyTether คุณจะต้องถอนการติดตั้งหรือปิดใช้งาน EasyTether: </font></font><code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></li> + </ul> + </li> +</ul> + +<h2 id="การเชื่อมต่ออุปกรณ์_Firefox_OS_ผ่าน_Wi-Fi"><span class="short_text" id="result_box" lang="th"><span class="hps">การเชื่อมต่ออุปกรณ์</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">ผ่าน Wi-Fi</span></span></h2> + +<ul> + <li><font><font>ตรวจสอบเวอร์ชันของคุณ: การดีบักแบบ Wi-Fi ต้องใช้ Firefox 39 หรือสูงกว่าและอุปกรณ์ Firefox OS ที่ใช้งาน Firefox OS 3.0 จาก 2015-03-27 หรือใหม่กว่า</font></font></li> + <li><font><font>เครื่องสแกนโค้ด QR อาจเป็นเรื่องที่น่าหงุดหงิดในขณะนี้เนื่องจากอุปกรณ์จริงจะจับภาพความละเอียดต่ำมาก </font></font><a href="https://bugzil.la/1145772"><font><font>ข้อผิดพลาด 1145772</font></font></a><font><font>มีเป้าหมายเพื่อปรับปรุงสิ่งนี้ในเร็ว ๆ นี้ </font><font>หากคุณมีปัญหาในเรื่องนี้ให้ลองสแกนด้วยทิศทางที่ต่างกัน </font><font>หากคุณเลือก "สแกนและจดจำแล้วคุณจะไม่ต้องสแกนรหัสอีกครั้งในครั้งต่อไปที่คุณเชื่อมต่อคอมพิวเตอร์กับอุปกรณ์นี้</font></font></li> +</ul> + +<h2 id="การเชื่อมต่อกับ_Firefox_สำหรับ_Android"><span class="short_text" id="result_box" lang="th"><span class="hps">การเชื่อมต่อกับ</span> <span class="hps">Firefox</span> <span class="hps">สำหรับ Android</span></span></h2> + +<p><font><font>หากคุณกำลังพยายามเชื่อมต่อกับอินสแตนซ์ Firefox ที่รันบน Android OS และไม่ปรากฏขึ้นคุณสามารถลองทำสิ่งต่างๆต่อไปนี้:</font></font></p> + +<ul> + <li><font><font>ตรวจสอบเวอร์ชั่นของ Firefox: ให้แน่ใจว่าอุปกรณ์ของคุณใช้</font></font><strong><font><font>Firefox 36 </font></font></strong><font><font>หรือสูงกว่า </font><font>WebIDE จะไม่ตรวจสอบรุ่นเก่าโดยอัตโนมัติเพื่อให้คุณต้องเปิดใช้งานการส่งต่อพอร์ตและเชื่อมต่อกับพอร์ตอุปกรณ์ - ทำตามคำแนะนำ</font><font>ที่นี่</font></font></li> + <li><font><font>ให้แน่ใจว่าคุณได้เปิดใช้งานการแก้จุดบกพร่องระยะไกลใน Firefox: เปิด Firefox สำหรับ Android เปิดเมนูเลือก</font><font>แล้วตรวจสอบช่องทำเครื่องหมายที่</font></font><code>Settings</code><code>Developer Tools > Remote debugging</code></li> + <li><font><font>ตรวจสอบว่ามีการแก้จุดบกพร่อง USB ในการตั้งค่านักพัฒนาซอฟต์แวร์ของอุปกรณ์</font></font></li> + <li><font><font>ถ้าคุณยังไม่เห็นอุปกรณ์ของคุณในหน้าต่าง WebIDE ให้ลองสลับ</font></font><code>Remote debugging</code><font><font>บนโทรศัพท์</font></font> + <ul> + <li><font><font>ตัดการเชื่อมต่ออุปกรณ์ของคุณจากคอมพิวเตอร์และปิด</font></font><code>Remote debugging</code><font><font>เครื่อง</font></font></li> + <li><font><font>เชื่อมต่ออุปกรณ์อีกครั้งและเปิด</font></font><code>Remote debugging</code><font><font>- โปรแกรมนี้จะรีสตาร์ทอินสแตนซ์ดีบักเกอร์บนโทรศัพท์</font></font></li> + <li><font><font>ลองเชื่อมต่อผ่าน WebIDE อีกครั้ง</font></font></li> + </ul> + </li> + <li><font><font>หากใช้ Windows ตรวจสอบให้แน่ใจว่าอุปกรณ์ Android ของคุณได้รับการตรวจสอบอย่างถูกต้องและใช้ไดรฟ์ USB ของ Google ที่มาพร้อมกับ Android SDK</font></font></li> +</ul> + +<h2 id="การเชื่อมต่อกับเบราว์เซอร์อื่น_ๆ_(Chrome_Safari)"><span class="short_text" id="result_box" lang="th"><span class="hps">การเชื่อมต่อกับ</span><span>เบราว์เซอร์</span><span>อื่น ๆ</span> <span class="atn hps">(</span><span>Chrome, Safari</span><span>)</span></span></h2> + +<p><font><font>WebIDE ใช้</font></font><a href="/en-US/docs/Tools/Valence"><font><font>Valence (ก่อนหน้านี้คือ Firefox Tools Adapter)</font></font></a><font><font>เพื่อเข้าถึงเบราว์เซอร์อื่นเช่น Chrome และ Safari </font></font></p> + +<p><font><font>หากคุณกำลังมีปัญหาในการเชื่อมต่อกับเบราว์เซอร์อื่น ๆ เหล่านี้ให้ตรวจสอบขั้นตอนการติดตั้งและบันทึกอื่น ๆ สำหรับเบราว์เซอร์ผู้ที่อยู่ใน</font><font>หน้า</font></font><a href="/en-US/docs/Tools/Valence"><font><font> Valence</font></font></a></p> + +<h2 id="ไม่สามารถแก้ปัญหาบางแอพพลิเคชั่น(debug)">ไม่สามารถแก้ปัญหาบาง<span class="short_text" id="result_box" lang="th"><span class="alt-edited">แอพพลิเคชั่น(</span></span>debug<span class="short_text" lang="th"><span class="alt-edited">)</span></span></h2> + +<p><font><font>หากคุณพบว่าคุณไม่สามารถแก้ปัญหาแอปพลิเคชันที่ได้รับการรับรองแอปที่ติดตั้งหรือแอปที่ติดตั้งไว้ในอุปกรณ์จริงแล้วคุณอาจกำลังดูนโยบายด้านความปลอดภัยที่มีสิทธิ์ จำกัด ของ WebIDE </font><font>หากต้องการข้อมูลเพิ่มเติมโปรดดูที่ส่วนที่เกี่ยวกับ</font></font><a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29"><font><font>การแก้จุดบกพร่องไม่ จำกัด แอป (รวมถึงแอพพลิเคได้รับการรับรองกระบวนการหลัก ฯลฯ</font></font></a><font><font> )</font></font></p> + +<h2 id="ไม่สามารถโหลดรายชื่อโครงการ"><span class="short_text" id="result_box" lang="th"><span class="hps">ไม่สามารถโหลด</span><span>รายชื่อ</span><span>โครงการ</span></span></h2> + +<p><font><font>หากคุณเปิด WebIDE ใน Firefox เวอร์ชันใดเวอร์ชันหนึ่งแล้วปรับลดรุ่นเป็น Firefox เวอร์ชันก่อนหน้าด้วยโปรไฟล์เดียวกันคุณอาจเห็นข้อผิดพลาด "Unable to load project list" เมื่อเปิด WebIDE ในเวอร์ชัน Firefox ก่อนหน้านี้</font></font></p> + +<p><font><font>ซึ่งอาจเกิดขึ้นได้เมื่อระบบจัดเก็บข้อมูลที่ WebIDE ใช้ ( </font></font><a href="/en-US/docs/Web/API/IndexedDB_API"><font><font>IndexedDB</font></font></a><font><font> ) จำเป็นต้องย้ายหรือปรับโครงสร้างไฟล์ภายในสำหรับเวอร์ชัน Firefox รุ่นใหม่ </font><font>รายการโครงการจะกลายเป็นเวอร์ชันล่าสุดของ Firefox ที่ไม่สามารถเข้าถึงได้</font></font></p> + +<p><font><font>ไม่มีข้อมูลสูญหาย แต่คุณจะต้องใช้ Firefox รุ่นล่าสุดที่ใช้กับโปรไฟล์ของคุณเพื่อรับรายชื่อโครงการ</font></font></p> + +<p><font><font>ถ้าคุณต้องการใช้ Firefox เวอร์ชันเก่ากว่านี้คุณสามารถลองลบรายการโครงการตามวิธีการต่อไปนี้ได้ แต่นี่ไม่ได้รับการสนับสนุนและอาจส่งผลต่อปัญหาหรือการสูญหายของข้อมูลเพิ่มเติม:</font></font></p> + +<ol> + <li><font><font>ปิด Firefox</font></font></li> + <li><font><font>ค้นหาไดเรกทอรีโปรไฟล์ Firefox ของคุณ</font></font></li> + <li><font><font>ค้นหา</font></font><code>storage</code><font><font>โฟลเดอร์ภายในไดเร็กทอรีโปรไฟล์</font></font></li> + <li><font><font>ภายใต้บางส่วนของต้นไม้แฟ้มนี้ควรมีไฟล์และ / หรือไดเรกทอรีที่ขึ้นต้นด้วย</font></font><code>4268914080AsptpcPerjo</code><font><font>(ชื่อที่ถูกแฮชของฐานข้อมูล)</font></font></li> + <li><font><font>ลบไฟล์และไดเรกทอรีดังกล่าวออก</font></font></li> + <li><font><font>เริ่ม Firefox และ WebIDE อีกครั้ง</font></font></li> +</ol> + +<h2 id="เปิดใช้งานการเข้าสู่ระบบ"><span class="short_text" id="result_box" lang="th"><span class="hps">เปิดใช้งาน</span><span>การเข้าสู่ระบบ</span></span></h2> + +<p><font><font>นอกจากนี้คุณยังสามารถเปิดใช้งานการบันทึกข้อมูลแบบ verbose เพื่อรวบรวมการวินิจฉัย:</font></font></p> + +<ol start="1" style="list-style-type: decimal;"> + <li><font><font>เปิด</font></font><a class="external external-icon" href="http://kb.mozillazine.org/About:config"><font><font>about: config</font></font></a><font><font>และเพิ่มการตั้งค่าใหม่ที่เรียกว่า</font></font><code>extensions.adbhelper@mozilla.org.sdk.console.logLevel</code><font><font>มีค่าสตริง</font></font><code>all</code><font><font>และการตั้งค่า</font><font>ไป</font></font><code>extensions.adbhelper@mozilla.org.debug</code><code>true</code></li> + <li><font><font>ใน</font></font><a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons"><font><font>Add-on Manager</font></font></a><font><font>ให้ปิดใช้งานและเปิดใช้งาน</font><a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons"><font>Add-on</font></a><font>ของ ADB Helper ใหม่</font></font></li> + <li><font><font>เปิด</font></font><a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console"><font><font>เบราว์เซอร์คอนโซล</font></font></a><code>adb</code><font><font>และตอนนี้คุณจะเห็นข้อความที่คอนโซลหน้าด้วย</font><font> </font><font>ถ้าข้อความไม่ได้มีความหมายอะไรกับคุณ</font><font>ขอความช่วยเหลือ</font></font></li> +</ol> + +<h2 id="ต้องการความช่วยเหลือ">ต้องการ<span class="short_text" id="result_box" lang="th"><span class="hps">ความช่วยเหลือ</span></span></h2> + +<p>ไปที่ <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools room on IRC</a> <span class="short_text" id="result_box" lang="th"><span class="hps">และเราจะพยายาม</span><span>ที่จะช่วย</span></span></p> diff --git a/files/th/tools/webide/การตั้งค่ารันไทม์/index.html b/files/th/tools/webide/การตั้งค่ารันไทม์/index.html new file mode 100644 index 0000000000..cbc902734e --- /dev/null +++ b/files/th/tools/webide/การตั้งค่ารันไทม์/index.html @@ -0,0 +1,161 @@ +--- +title: การตั้งค่ารันไทม์ +slug: Tools/WebIDE/การตั้งค่ารันไทม์ +translation_of: Archive/WebIDE/Setting_up_runtimes +--- +<p>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.</p> + +<p>Under the "Select Runtime" dropdown, runtimes are grouped into four types:</p> + +<dl> + <dt><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Connecting_a_Firefox_OS_device">USB DEVICES</a></dt> + <dd>Firefox OS devices connected over USB. From Firefox 36 this also gets you connected to <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Firefox for Android over USB</a>.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Connecting_over_WiFi">WI-FI DEVICES</a></dt> + <dd>Firefox OS devices connected over Wi-Fi. <em>New in Firefox 39.</em></dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Adding_a_Simulator">SIMULATORS</a></dt> + <dd>Instances of the Firefox OS Simulator that you've installed.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Other_runtimes">OTHER</a></dt> + <dd>Remote runtimes to connect WebIDE to an arbitrary host and port. If you have the <a href="/en-US/docs/Tools/Valence">Valence</a> add-on installed, this section will also list the <a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Valence-enabled_runtimes">additional runtimes it enables</a>.</dd> +</dl> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10377/webide-select-runtime.png" style="display: block; height: 701px; margin-left: auto; margin-right: auto; width: 799px;">The rest of this section describes how you can add some runtimes.</p> + +<h2 id="การเชื่อมต่ออุปกรณ์_Firefox_OS"><span class="short_text" id="result_box" lang="th"><span class="hps">การเชื่อมต่ออุปกรณ์</span> <span class="hps">Firefox</span> <span class="hps">OS</span></span></h2> + +<p>If you have a sufficiently recent version of Firefox and Firefox OS, you can <a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Connecting_over_WiFi">connect the Firefox OS device over WiFi</a>. Otherwise, you must connect over USB.</p> + +<h3 id="การเชื่อมต่อผ่าน_USB"><span class="short_text" id="result_box" lang="th"><span class="hps">การเชื่อมต่อ</span><span>ผ่าน USB</span></span></h3> + +<p>Before you can connect a Firefox OS device, there's some setup you have to go through:</p> + +<ul> + <li><strong>Check your Firefox OS version: </strong>Make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check the version, go to the Settings app on the device, then <code>Device Information > Software</code>. If you don't have a high enough version, find your device in the <a href="/en-US/Firefox_OS/Developer_phone_guide">developer phone guide</a> and follow the instructions for upgrading.</li> + <li><strong>Enable remote debugging: </strong>In the Settings app on the device, go to <code>Device information > More information > Developer</code>. + <ul> + </ul> + + <ul> + <li>Firefox OS 1.3 and earlier: "Remote Debugging" is just a simple checkbox. Check it.</li> + <li>Firefox OS 1.4 and later: "Remote Debugging" asks you to enable for just ADB, or for ADB and DevTools. Select "ADB and DevTools".</li> + </ul> + </li> + <li><strong>Disable Screen lock on your device:</strong> In the Settings app on the device, go to <code>Screen Lock</code> and uncheck the <code>Lock Screen</code> checkbox. This is required because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li> + <li><strong>If you want unrestricted debugging privileges, including certified apps, built-in apps, and apps already installed on a real device</strong>: See the section on <a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps#Unrestricted_app_debugging_(including_certified_apps.2C_main_process.2C_etc.)">Unrestricted app debugging (including certified apps, main process, etc.)</a>.</li> +</ul> + +<div class="note"> +<p><strong>เฉพาะ Linux:</strong></p> + +<ul> + <li>Add a <code>udev</code> rules file, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. The <code>idVendor</code> attribute to use for the Geeksphone is "05c6", and <a href="http://developer.android.com/tools/device.html#VendorIds">this page</a> lists other <code>idVendor</code> values.</li> +</ul> +</div> + +<div class="note"> +<p><strong>เฉพาะ Windows:</strong></p> + +<ul> + <li>You need to install drivers, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. You can find drivers for Geeksphone devices on the <a href="http://downloads.geeksphone.com/">Geeksphone web site</a>. Windows 8 by default will not let you install unsigned drivers. See this tutorial on <a class="external external-icon" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"How to install an unsigned driver on Windows 8"</a>.</li> + <li>If WebIDE can't see your device after following all the steps, you may have to <a class="external external-icon" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li> +</ul> +</div> + +<p>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":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 710px;"></p> + +<p>If you don't see your device, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p> + +<h3 id="การเชื่อมต่อผ่าน_WiFi"><span class="short_text" id="result_box" lang="th"><span class="hps">การเชื่อมต่อ</span><span>ผ่าน WiFi</span></span></h3> + +<p>To connect over WiFi, you need:</p> + +<ul> + <li>Firefox 39 or later</li> + <li>a Firefox OS device running a build of Firefox OS 3.0 from 2015-03-27 or later</li> +</ul> + +<p>This doesn't use <a href="http://developer.android.com/tools/help/adb.html">ADB</a> at all, and is therefore likely to be more reliable than the USB method.</p> + +<h4 id="Enable_WiFi_debugging">Enable WiFi debugging</h4> + +<p>First, enable WiFi debugging on the Firefox OS device.</p> + +<ol> + <li>Open <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer Settings</a> on the device (Settings -> Developer)</li> + <li>Check "DevTools via Wi-Fi"</li> + <li>Edit the device name if desired</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10361/fxos-wifi-opts.png" style="display: block; height: 512px; margin: 0px auto; width: 352px;"></p> + +<h4 id="Select_the_device">Select the device</h4> + +<p>In WebIDE, click the "Select Runtime" menu. You should see a section labeled "Wi-Fi Devices", and your device should appear under it:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10365/webide-wifi-runtime.png" style="display: block; height: 700px; margin: 0px auto; width: 708px;">Select your device.</p> + +<h4 id="Authenticate">Authenticate</h4> + +<p>Next, in the WebIDE you'll see a prompt with a QR code:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10367/webide-qr-code.png" style="display: block; height: 458px; margin: 0px auto; width: 886px;">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.</p> + +<p>The QR code scanner can be a bit frustrating at the moment, as real devices appear to capture a very low resolution picture. <a href="https://bugzil.la/1145772">Bug 1145772</a> aims to improve this soon. If you have trouble with this, try scanning with a few different orientations.</p> + +<p>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.</p> + +<h2 id="การเชื่อมต่อกับ_Firefox_สำหรับ_Android"><span class="short_text" id="result_box" lang="th"><span class="hps">การเชื่อมต่อกับ</span> <span class="hps">Firefox</span> <span class="hps">สำหรับ Android</span></span></h2> + +<p>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 <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">connecting to Firefox for Android from WebIDE</a>.</p> + +<p>Before Firefox 36, you can <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">connect to Firefox for Android without using WebIDE at all</a>, or can use WebIDE by setting up a <a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Remote_runtime">custom remote runtime</a>.</p> + +<h2 id="Adding_a_Simulator">Adding a Simulator</h2> + +<p><span style="line-height: 1.5;">The <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> is <span style="line-height: 1.5;">a version of the higher layers of Firefox OS</span> that simulates a Firefox OS device, but runs on the desktop</span><span style="line-height: 1.5;">. </span><span style="line-height: 1.5;">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.</span></p> + +<p><span style="line-height: 1.5;">This means that in many cases, you don't need a real device to test and debug your app. </span></p> + +<p>The Simulator doesn't ship inside Firefox but as a Firefox <a href="/en-US/Add-ons">add-on</a>. 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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="display: block; height: 559px; margin-left: auto; margin-right: auto; width: 712px;">To learn more about the Simulator, see its <a href="/en-US/docs/Tools/Firefox_OS_Simulator">documentation page</a>.</p> + +<h2 id="Other_runtimes">Other runtimes</h2> + +<h3 id="Remote_runtime">Remote runtime</h3> + +<p>With a remote runtime you can use an arbitrary hostname and port to connect to the remote device.</p> + +<p>Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or <a href="http://developer.android.com/tools/help/adb.html">ADB</a>. 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.</p> + +<p>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 <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a> command (example: <code>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</code>).<br> + <br> + If you then want to use WebIDE to connect as well, you should <a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">disable the ADB Helper add-on</a> and connect WebIDE using the Custom runtime option, entering the host and port that you passed to <code>adb forward</code> (example: <code>localhost:6000</code>).</p> + +<p>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. <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">See more about connecting to Firefox for Android using ADB prior to Firefox 36</a>.</p> + +<h3 id="Valence-enabled_runtimes">Valence-enabled runtimes</h3> + +<p>If you have the <a href="/en-US/docs/Tools/Valence">Valence</a> add-on installed, you'll see three additional runtimes:</p> + +<ul> + <li>Chrome on Android</li> + <li>Safari on iOS</li> + <li>Chrome Desktop</li> +</ul> + +<p>For instructions on how to connect to these runtimes, see the relevant entry in the <a href="/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> page.</p> + +<h2 id="Selecting_a_runtime">Selecting a runtime</h2> + +<p>Once you've set up a runtime you can select it using the "Select Runtime" menu.</p> + +<ul> + <li>If you select a Simulator, WebIDE launches the Simulator.</li> + <li>If you select a Firefox OS device WebIDE connects to the device. On the device a dialog will ask you to confirm that you wish to connect: press "OK".</li> +</ul> + +<p>Now the "play" button in the center of the WebIDE toolbar is enabled: click it to <a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps">install and run the app</a> in the selected runtime.</p> diff --git a/files/th/tools/webide/การทํางานร่วมกับคอร์โดวาแอพพลิเคชั่นใน_webide/index.html b/files/th/tools/webide/การทํางานร่วมกับคอร์โดวาแอพพลิเคชั่นใน_webide/index.html new file mode 100644 index 0000000000..a4b5dbc4bc --- /dev/null +++ b/files/th/tools/webide/การทํางานร่วมกับคอร์โดวาแอพพลิเคชั่นใน_webide/index.html @@ -0,0 +1,43 @@ +--- +title: การทำงานร่วมกับคอร์โดวาแอพพลิเคชั่นใน WebIDE +slug: Tools/WebIDE/การทํางานร่วมกับคอร์โดวาแอพพลิเคชั่นใน_WebIDE +translation_of: Archive/WebIDE/Working_with_Cordova_apps_in_WebIDE +--- +<div class="geckoVersionNote"> +<p>New in Firefox 39.</p> +</div> + +<p><a href="http://cordova.apache.org/">Apache Cordova</a><span id="result_box" lang="th"><span class="hps"> ช่วยให้คุณสามารถ</span><span>เขียน</span><span class="alt-edited">แอพพลิเคชั่น</span><span>โดยใช้ HTML,</span> <span class="hps">JavaScript และ</span> <span class="hps">CSS และ</span><span>แล้วสร้าง</span><span>รุ่น</span><span>พื้นเมือง</span><span>ของ</span><span>มันสำหรับ</span><span>แพลตฟอร์มโทรศัพท์มือถือ</span><span>เช่น</span> <span class="hps">iOS และ Android </span></span><br> + โดยคอร์โดวา <a href="/en-US/Apps/Tools_and_frameworks/Cordova_support_for_Firefox_OS">คุณยังสามารถสร้างรุ่น app ของคุณสำหรับ Firefox OS</a></p> + +<p>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.</p> + +<p>First, create a Cordova app, as you normally would:</p> + +<ul> + <li>Install Cordova, if you haven't already: + <pre class="brush: bash"><code>npm install -g cordova</code></pre> + </li> +</ul> + +<ul> + <li>Create your Cordova app: + <pre class="brush: bash"><code>cordova create my-app</code></pre> + </li> +</ul> + +<ul> + <li>Add Firefox OS as a target platform for your app: + <pre class="brush: bash">cd my-app +cordova platform add firefoxos</pre> + </li> +</ul> + +<p>Next:</p> + +<ul> + <li><a href="/en-US/docs/Tools/WebIDE/Opening_WebIDE">open WebIDE</a></li> + <li>select <a href="/en-US/docs/Tools/WebIDE/Creating_and_editing_apps#Open_a_packaged_app">"Open Packaged App"</a>, and select the directory containing your Cordova app's <code>config.xml</code> file.</li> +</ul> + +<p>Now you can edit the app as a Cordova app, and whenever you <a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps#Running_apps">run the app</a>, 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 <a href="/en-US/Apps/Build/Manifest">manifest</a>, so it can perform <a href="/en-US/docs/Tools/WebIDE/Creating_and_editing_apps#Manifest_validation">manifest validation</a>.</p> diff --git a/files/th/tools/webide/การเปิด_webide/index.html b/files/th/tools/webide/การเปิด_webide/index.html new file mode 100644 index 0000000000..709cde4ece --- /dev/null +++ b/files/th/tools/webide/การเปิด_webide/index.html @@ -0,0 +1,26 @@ +--- +title: การเปิด WebIDE +slug: Tools/WebIDE/การเปิด_WebIDE +translation_of: Archive/WebIDE/Opening_WebIDE +--- +<p><span class="short_text" id="result_box" lang="th"><span class="hps">มีสามวิธี</span><span>ที่จะเปิด</span> <span class="hps">WebIDE</span> <span class="hps">ได้แก่:</span></span></p> + +<ul> + <li>ในเมนู <em>Tools > Web Developer</em> แล้ว <span class="short_text" id="result_box" lang="th"><span class="hps">คลิกที่</span><span>รายการ</span> </span><em>WebIDE</em></li> + <li><span class="short_text" id="result_box" lang="th"><span class="hps">ใช้แป้นพิมพ์ลัด</span></span> <em>Shift + F8</em>.</li> + <li><span class="short_text" id="result_box" lang="th"><span class="hps">คลิกที่ไอคอน</span><span>เฉพาะ </span><span>ใน</span><span>แถบเครื่องมือ</span> <span class="hps">Firefox</span></span> มันจะแสดงเสมอถ้าคุณใช้ <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition </a> <span class="short_text" id="result_box" lang="th"><span class="hps">และ</span><span> Firefox</span> <span class="hps">อื่น ๆ</span> <span class="hps">จาก</span></span> <a href="/th/Firefox/Releases/36">เวอร์ชั่น 36</a> <span class="short_text" id="result_box" lang="th"><span class="hps">เป็นต้นไป</span><span>ก็จะปรากฏขึ้น</span><span>หลังจากที่คุณได้</span><span>เปิด</span></span> WebIDE หนึ่งครั้ง:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9437/webide-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 897px;"></p> + +<p><span class="short_text" id="result_box" lang="th"><span class="hps">นี่คือสิ่งที่ดูเหมือน </span></span><span class="short_text" lang="th"> <span class="hps">WebIDE</span><span class="hps">:</span></span><img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">The dropdown on the left labeled <em>Open App</em> lets you open existing apps or create new ones. The dropdown on the right labeled <em>Select Runtime</em> lets you select a runtime or <a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes">set up a new runtime</a>.</p> + +<p>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.</p> + +<p>You can change the font size throughout WebIDE using the standard keyboard shortcuts (use <code>Command</code> instead of <code>Control</code> on OS X):</p> + +<ul> + <li><code>Ctrl +</code> increases font size.</li> + <li><code>Ctrl -</code> decreases font size.</li> + <li><code>Ctrl 0</code> resets the font size to the default.</li> +</ul> |