溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“如何用Pycharm調(diào)試器實現(xiàn)Java腳本調(diào)試”，在日常操作中，相信很多人在如何用Pycharm調(diào)試器實現(xiàn)Java腳本調(diào)試問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何用Pycharm調(diào)試器實現(xiàn)Java腳本調(diào)試”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
1、總覽
對于Web開發(fā)而言，調(diào)試Java腳本是十分重要的。為了顯示Pycharm對于Java腳本的強大調(diào)試能力，我們這里創(chuàng)建一個非常簡單的腳本，用以展示一些簡單的瀏覽器頁面，然后在服務(wù)器上對其進行調(diào)試。
為了能夠在外部服務(wù)器上進行調(diào)試，需要在上面運行程序文件，同時在你的電腦上拷貝一份。不過沒關(guān)系，無論Web服務(wù)器是運行在物理遠端還是運行在你的電腦上，其中的應(yīng)用程序都可以看成是一個遠程服務(wù)程序。
當(dāng)一個使用JavaScript生成的遠程文件打開時，調(diào)試器會告訴Pycharm當(dāng)前處理文件的名稱以及對應(yīng)的行號。Pycharm會打開本地副本并定位到相應(yīng)的行。Pycharm的這種行為使得服務(wù)端和客戶端的文件進程保持同步。這種通信機制成為映射（mapping），在debug配置文件中保留了相關(guān)的設(shè)置信息。
2、準(zhǔn)備工作
（1）Pycharm版本為3.0或者更高。
?。?）使用谷歌瀏覽器（這篇教程是基于谷歌Chorme的）
?。?）你已經(jīng)安裝了JetBrains IDE Support外部插件。如果你是第一次加載調(diào)試器，Pycharm會給出你關(guān)于安裝JetBrains IDE Support外部插件的重要性。
舉個例子，對于瀏覽器，當(dāng)在地址欄的右側(cè)顯示圖標(biāo)，并且非透明，說明插件已經(jīng)安裝并且成功激活。
可以在https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji下載和安裝JetBrains IDE Support外部擴展。
建議使用XAMPP作為服務(wù)端程序（文章是針對XAMPP的）。
3、創(chuàng)建一個簡單的工程
在主菜單中選擇File→New Project，選擇一個空工程，命名為MyJSProject：
在一個獨立的窗口中打開這個工程：
4、實例準(zhǔn)備
首先，創(chuàng)建一個HTML頁面。在工程管理窗口中按下Alt+Insert，在彈出的快捷菜單中選擇HTML文件類型，命名為numbers：
Pycharm會在生成的HTML文件中添加一些原始內(nèi)容。接下來，向其中嵌入一個JavaScript文件，在<body>標(biāo)簽下輸入一下代碼：
在輸入代碼時注意體會Pycharm的拼寫提示功能：
完成后，注意文件名numbers.js以高亮的形式給出。這說明當(dāng)前的JavaScript文件不存在。在將光標(biāo)定位在名稱“numbers”上，按下Alt+Enter（或者單擊左側(cè)的小黃色燈泡）；會給出快捷提示——創(chuàng)建一個缺省文件：
通過這個快捷方法，已將創(chuàng)建好了原始的JavaScript文件，接下來輸入下面代碼：
5、設(shè)置斷點
接下來在JavaScript文件中插入斷點，非常簡單，在右側(cè)單擊即可：
6、配置服務(wù)器
7、創(chuàng)建一個服務(wù)器
打開Settings/Preferences對話框（Ctrl+Alt+S或者單擊主菜單的設(shè)置按鈕），單擊Deployment page頁面的綠色的加號，將服務(wù)器命名為MyRemoteServer，指定類型為local or mounted server。
8、配置映射連接
接下來配置創(chuàng)建的服務(wù)器。在Connection選項卡中，輸入需要加載的本地文件的目錄，這里為C:\xampp\htdocs，也就意味著將從這個目錄來上傳本地文件：
單擊Mappings選項卡，在這里定義本地路徑，服務(wù)器的部署路徑（與Connection選項卡的設(shè)置相同），以及服務(wù)器的Web路徑：
9、定義項目的默認(rèn)服務(wù)器
指定創(chuàng)建的服務(wù)器為當(dāng)前項目的默認(rèn)服務(wù)器，只需在Deployment toolbar中單擊按鈕。
10、預(yù)覽服務(wù)器
接下來需要確認(rèn)我們的服務(wù)程序能夠在Pycharm的可視化窗口中順利上傳和運行。在主菜單中選擇Tools → Deployment → Browse Remote Hosts。遠程Host控制窗口會顯示當(dāng)前新開啟的服務(wù)：
11、向服務(wù)器應(yīng)用中部署文件
在Pycharm中這個操作非常簡單。在主菜單中選擇Tools → Deployment → Upload to MyRemoteServer，確保新目錄C:\xampp\htdocs已經(jīng)在服務(wù)器上順利創(chuàng)建。
另一種方式可以通過右擊文件，在快捷菜單中進行操作。當(dāng)然二者都需要通過Upload to MyRemoteServer命令來完成。
12、調(diào)試
13、開始調(diào)試
開始調(diào)試后，將會在瀏覽器中顯示你的HTML頁面，同時調(diào)試窗口 Debug tool window開啟。應(yīng)有程序會在命中第一個斷點的時候停止，并用藍色標(biāo)記代碼行：
更多有關(guān)斷點的信息參見product documentation中的Breakpoints部分。
對應(yīng)用程序進行更為深入的調(diào)試，相關(guān)的調(diào)試信息會顯示在調(diào)試窗口以及瀏覽器上：
單擊和控制代碼的調(diào)試進程，通過關(guān)閉黃色標(biāo)志或者單價Cancel按鈕來終止調(diào)試。
到此，關(guān)于“如何用Pycharm調(diào)試器實現(xiàn)Java腳本調(diào)試”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
