字節跳動開發者工具是一款專門為小程序制作的開發者工具，利用這款開發者工具用戶可以進行小程序的制作，適用于頭條的小程序，在軟件中為用戶提供了代碼編輯功能，可以進行代碼的編輯和修改，還有調試工具和代碼檢測工具，可以查看代碼是否有錯誤，讓小程序的開發變得更加簡單。

軟件功能

登錄頁

使用手機驗證或飛書 Lark 掃碼可登錄小程序開發工具。

新建項目

可以選擇窗口中央的「創建一個頭條小程序」，或點擊右下角的「新建」按鈕，新建工程。

主界面

圖中所示分別為：工具欄、模擬器、編輯器、調試器四大部分。

怎么用

很多的用戶第一次使用開發者工具進行小程序的開發，不知道軟件的具體使用方法，下面小編為大家帶來軟件的基本使用方法介紹，感興趣的用戶可以看看，從新建項目到界面介紹再到軟件的工具功能介紹，讓用戶可以正確使用軟件。

新建項目

當滿足：

已擁有一個字節跳動小程序的 AppID；

所登錄的賬號是該 AppID 所對應小程序的開發者。

可以選擇窗口中央的「創建一個頭條小程序」，或點擊右下角的「新建」按鈕，新建工程。

選擇項目類型：小程序或小游戲（一旦選擇無法更改）。

選擇一個空目錄，作為工程目錄。當選擇空目錄時，可以選擇是否在該目錄下生成一個簡單的項目。

appId 需要在公眾平臺管理后臺獲取。

主界面

圖中所示分別為：工具欄、模擬器、編輯器、調試器四大部分。

窗口菜單欄

小程序：可以查看開發者工具版本號

項目：支持打開「開發者工具」本身的調試器

編輯：可以查看編輯相關的操作和快捷鍵

工具欄

編譯：編譯當前的小程序項目

刷新頁面：刷新當前頁面

清除緩存：可以清除文件緩存、數據緩存、登錄狀態和授權數據

上傳：填入 app 版本號及更新日志，上傳小程序應用內容到服務器

預覽：生成二維碼，預覽已上傳版本

詳情：展示當前小程序的 appid、user_id、本地目錄、文件系統、基礎版本與編譯版本，并可以設置校驗 TLS 版本以及 HTTPS 證書

點擊「模擬器」、「編輯器」、「調試器」三個按鈕可以隱藏/顯示相應的模塊，界面中至少有一個模塊被顯示。

模擬器

模擬器模擬頭條小程序在客戶端真實的邏輯表現，對于絕大部分的 API 均能夠在模擬器上呈現出正確的狀態。開發者可以選擇不同的設備，調試小程序在不同尺寸機型上的適配問題。

編輯器

編輯器模塊內可以對當前項目進行代碼編寫和文件的添加、刪除以及重命名等基本操作。

文件格式：因 iOS 下僅支持 UTF8 編碼格式，最新版本的開發者工具會在上傳代碼時候對代碼文件做一次編碼格式校驗。

文件支持：工具目前提供了 5 種文件的編輯：ttml、ttss、js、json 以及圖片文件的預覽。

文件操作：可以通過在目錄樹上右鍵，選擇新建 Page，將自動生成頁面所需要的 ttml、ttss、js、json，及在 app.json 的 pages 字段，添加需要新建的頁面的路徑，將會自動生成該頁面所需要的文件，兩種方式新建頁面。

目錄樹：可以查看當前項目的目錄結構。

調試器

調試工具分為 6 大功能模塊：Bxml、Console、Sources、Network、Application、Performance

自定義編譯條件

編譯條件會讀取 project.config.json 中的 condition 字段下的相關配置，方便導入編譯條件。

點擊工具欄的普通編譯處，在下拉列表中，點擊添加編譯模式，會彈出填寫編譯條件窗口，添加自己的定制化的編譯條件。

在彈出的窗口中，添加模式名稱，啟動頁面，啟動參數以及進入場景幾個字段，點擊確認，生成新的編譯條件。

上傳提審

點擊工具欄的"上傳"按鈕，填寫版本號（版本號不能重復，需在上一個版本號上加 1）, 填寫更新日志，點擊確認上傳至開發者平臺。

上傳完成后，進入開發者平臺=》發布頁面進行提審

Bxml panel

Bxml panel 用于幫助開發者開發 ttml 轉化后的界面。在這里可以看到真實的頁面結構以及結構對應的 ttss 屬性，同時可以通過修改對應 ttss 屬性，在模擬器中實時看到修改的情況（僅為實時預覽，無法保存到文件）。通過調試模塊左上角的選擇器，還可以快速定位頁面中組件對應的 ttml 代碼。

Console panel

開發者可以在此調試代碼。

Sources panel

Sources panel 用于顯示當前項目的腳本文件，同瀏覽器開發不同，小程序框架會對腳本文件進行編譯的工作，所以在 Sources panel 中開發者看到的文件是經過處理之后的腳本文件，開發者的代碼都會被包裹在 define 函數中，并且對于 Page 代碼，在尾部會有 require 的主動調用。

Network panel

Network Panel 用于觀察和顯示 request 和 socket 的請求情況。

AppData panel

AppData panel 用于展示以及修改當前 page 的 data 屬性

Storage panel

可以查看 Storage 存儲情況。

調試教程

在完成小程序的開發之后，下一步就是要對該小程序進行調試測試，看看小程序是否有問題，找出BUG并進行解決，很多的用戶在完成后不知道怎么去調試，下面小編為大家帶來調試教程，想要調試的用戶快來看看吧。

1、當小程序更新完成后，將會生成對應的二維碼，可掃碼進行真機調試。

真機調試步驟如下：

手機重新安裝今日頭條線上最新版，kill 掉進程重啟，打開 App 左右滑動 tab 頁，正常瀏覽 app 幾秒；

使用安裝測試 App 的手機掃碼（測試某個應用，則使用對應的應用掃碼），掃碼后 Android 下使用 Chrome、iOS 使用 Safair 打開對應網址，點擊打開小程序即可喚起，請務必使用 Chorme 和 Safair ，不然不能正常喚起；

注意事項：

如果打不開小程序，請 kill 掉進程，重啟 app 再試一次，若還有問題，請去開放社區反饋；

如果顯示 App 版本不支持建議確認 App 版本，手機內是否有多個頭條 App。建議全部卸載后重新安裝；

如果提示系統版本不支持，檢查手機系統版本，安卓大于等于 5.0，iOS 高于 9.0。

打不開怎么辦

很多的用戶在完成軟件的安裝之后，想要打開卻遇到問題，彈出錯誤無法正常的打開軟件，下面小編為大家帶來對應的解決方法介紹，讓用戶可以順利打開軟件，完成自己的開發工作。

解決字節跳動開發者工具安裝無法打開問題

下載字節跳動開發者工具 下載之后 點擊安裝 默認安裝到

C:\Users\你的電腦名稱\AppData\Local\Programs\bytedanceide

目錄下 但是點擊打開 彈窗報紅色錯誤如下圖：

解決方法：

C:\Users\你的電腦名稱\AppData\Roaming 目錄下新建 bytedanceide 文件夾

然后 bytedanceide 文件夾下面新建 tmadevtool 文件夾

然后 tmadevtool 文件夾下面新建一個名為 projectInfo 的無后綴的文件

就這么輕松解決啦

重新打開字節跳動開發者工具 一切正常！！！

更新日志

3.0.6

重構了 IDE 樣式

刪除了若干冗余菜單

修復了 windows 下搜索異常的問題

修復了 css 中使用 background-image 訪問本地資源異常的問題

修復了部分小程序預覽圖顯示異常的問題

修復了部分 API 的權限混亂問題

修復了自定義編譯條件讀取失敗的問題

修復了啟動參數未生效的問題

修復了 IDE 多開模擬器顯示異常的問題