文章标题

最新推荐文章于 2024-04-25 12:35:32 发布

erinapple

最新推荐文章于 2024-04-25 12:35:32 发布

阅读量396

点赞数

分类专栏： python学习文章标签：调试

python学习专栏收录该内容

44 篇文章 1 订阅

订阅专栏

最全Pycharm教程（12）——Pycharm调试器之Java脚本调试

    <div class="article_manage clearfix">
    <div class="article_l">
        <span class="link_categories">
        标签：
          <a onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);" href="http://www.csdn.net/tag/Pycharm" target="_blank">Pycharm</a>
        </span>
    </div>
    <div class="article_r">
        <span class="link_postdate">2015-12-08 17:35</span>
        <span title="阅读次数" class="link_view">5697人阅读</span>
        <span title="评论次数" class="link_comments"> <a onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])" href="#comments">评论</a>(1)</span>
        <span class="link_collect tracking-ad" data-mod="popu_171"> <a title="收藏" onclick="javascript:collectArticle('%e6%9c%80%e5%85%a8Pycharm%e6%95%99%e7%a8%8b%ef%bc%8812%ef%bc%89%e2%80%94%e2%80%94Pycharm%e8%b0%83%e8%af%95%e5%99%a8%e4%b9%8bJava%e8%84%9a%e6%9c%ac%e8%b0%83%e8%af%95','50221825');return false;" href="javascript:void(0);" target="_blank">收藏</a></span>
         <span class="link_report"> <a title="举报" onclick="javascript:report(50221825,2);return false;" href="#report">举报</a></span>

    </div>
</div>    <style type="text/css">        
        .embody{
            padding:10px 10px 10px;
            margin:0 -20px;
            border-bottom:solid 1px #ededed;                
        }
        .embody_b{
            margin:0 ;
            padding:10px 0;
        }
        .embody .embody_t,.embody .embody_c{
            display: inline-block;
            margin-right:10px;
        }
        .embody_t{
            font-size: 12px;
            color:#999;
        }
        .embody_c{
            font-size: 12px;
        }
        .embody_c img,.embody_c em{
            display: inline-block;
            vertical-align: middle;               
        }
         .embody_c img{               
            width:30px;
            height:30px;
        }
        .embody_c em{
            margin: 0 20px 0 10px;
            color:#333;
            font-style: normal;
        }
</style>
<script type="text/javascript">
    $(function () {
        try
        {
            var lib = eval("("+$("#lib").attr("value")+")");
            var html = "";
            if (lib.err == 0) {
                $.each(lib.data, function (i) {
                    var obj = lib.data[i];
                    //html += '<img src="' + obj.logo + '"/>' + obj.name + "&nbsp;&nbsp;";
                    html += ' <a href="' + obj.url + '" target="_blank">';
                    html += ' <img src="' + obj.logo + '">';
                    html += ' <em><b>' + obj.name + '</b></em>';
                    html += ' </a>';
                });
                if (html != "") {
                    setTimeout(function () {
                        $("#lib").html(html);                      
                        $("#embody").show();
                    }, 100);
                }
            }      
        } catch (err)
        { }

    });
</script>
  <div class="category clearfix">
    <div class="category_l">
       <img src="http://static.blog.csdn.net/images/category_icon.jpg">
        <span>分类：</span>
    </div>
    <div class="category_r">
                <label onclick="GetCategoryArticles('5935163','u013088062','top','50221825');">
                    <span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">Python编程<em>（58）</em></span>
                  <img class="arrow-down" style="display:inline;" src="http://static.blog.csdn.net/images/arrow_triangle _down.jpg">
                  <img class="arrow-up" style="display:none;" src="http://static.blog.csdn.net/images/arrow_triangle_up.jpg">
                    <div class="subItem">
                        <div class="subItem_t"><a href="http://blog.csdn.net/u013088062/article/category/5935163" target="_blank">作者同类文章</a><i class="J_close">X</i></div>
                        <ul class="subItem_l" id="top_5935163">                            
                        </ul>
                    </div>
                </label>                    
    </div>
</div>
    <div class="bog_copyright">         
        <p class="copyright_p">版权声明：本文为博主原创文章，转载时麻烦注明源文章链接，谢谢合作</p>
    </div>

　　最全Pycharm教程（1）——定制外观

　　最全Pycharm教程（2）——代码风格

　　最全Pycharm教程（3）——代码的调试、运行

　　最全Pycharm教程（4）——有关Python解释器的相关配置

　　最全Pycharm教程（5）——Python快捷键相关设置

　　最全Pycharm教程（6）——将Pycharm作为Vim编辑器使用

　　最全Pycharm教程（7）——虚拟机VM的配置

　　最全Pycharm教程（8）——Django工程的创建和管理

　　最全Pycharm教程（9）——创建并运行一个基本的Python测试程序

　　最全Pycharm教程（10）——Pycharm调试器总篇

　　最全Pycharm教程（11）——Pycharm调试器之断点篇

　　1、总览

　　对于Web开发而言，调试Java脚本是十分重要的。为了显示Pycharm对于Java脚本的强大调试能力，我们这里创建一个非常简单的脚本，用以展示一些简单的浏览器页面，然后在服务器上对其进行调试。

　　为了能够在外部服务器上进行调试，需要在上面运行程序文件，同时在你的电脑上拷贝一份。不过没关系，无论Web服务器是运行在物理远端还是运行在你的电脑上，其中的应用程序都可以看成是一个远程服务程序。

　　当一个使用JavaScript生成的远程文件打开时，调试器会告诉Pycharm当前处理文件的名称以及对应的行号。Pycharm会打开本地副本并定位到相应的行。Pycharm的这种行为使得服务端和客户端的文件进程保持同步。这种通信机制成为映射（mapping），在debug配置文件中保留了相关的设置信息。

　　2、准备工作

　　（1）Pycharm版本为3.0或者更高。

　　（2）使用谷歌浏览器（这篇教程是基于谷歌Chorme的）

　　（3）你已经安装了JetBrains IDE Support外部插件。如果你是第一次加载调试器，Pycharm会给出你关于安装JetBrains IDE Support外部插件的重要性。

　　举个例子，对于浏览器，当在地址栏的右侧显示图标，并且非透明，说明插件已经安装并且成功激活。

　　可以在https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji下载和安装JetBrains IDE Support外部扩展。

　　建议使用XAMPP作为服务端程序（文章是针对XAMPP的）。

　　3、创建一个简单的工程

　　在主菜单中选择File→New Project，选择一个空工程，命名为MyJSProject：

　　在一个独立的窗口中打开这个工程：

　　4、实例准备

　　首先，创建一个HTML页面。在工程管理窗口中按下Alt+Insert，在弹出的快捷菜单中选择HTML文件类型，命名为numbers：

　　Pycharm会在生成的HTML文件中添加一些原始内容。接下来，向其中嵌入一个JavaScript文件，在<body>标签下输入一下代码：

　　在输入代码时注意体会Pycharm的拼写提示功能：

　　完成后，注意文件名numbers.js以高亮的形式给出。这说明当前的JavaScript文件不存在。在将光标定位在名称“numbers”上，按下Alt+Enter（或者单击左侧的小黄色灯泡）；会给出快捷提示——创建一个缺省文件：

　　通过这个快捷方法，已将创建好了原始的JavaScript文件，接下来输入下面代码：

　　 5、设置断点

　　接下来在JavaScript文件中插入断点，非常简单，在右侧单击即可：

　　6、配置服务器

　　7、创建一个服务器

　　打开Settings/Preferences对话框（Ctrl+Alt+S或者单击主菜单的设置按钮），单击Deployment page页面的绿色的加号，将服务器命名为MyRemoteServer，指定类型为local or mounted server。

　　8、配置映射连接

　　接下来配置创建的服务器。在Connection选项卡中，输入需要加载的本地文件的目录，这里为C:\xampp\htdocs，也就意味着将从这个目录来上传本地文件：

　　单击Mappings选项卡，在这里定义本地路径，服务器的部署路径（与Connection选项卡的设置相同），以及服务器的Web路径：

　　9、定义项目的默认服务器

　　指定创建的服务器为当前项目的默认服务器，只需在Deployment toolbar中单击按钮。

　　10、预览服务器

　　接下来需要确认我们的服务程序能够在Pycharm的可视化窗口中顺利上传和运行。在主菜单中选择Tools → Deployment → Browse Remote Hosts。远程Host控制窗口会显示当前新开启的服务：

　　11、向服务器应用中部署文件

　　在Pycharm中这个操作非常简单。在主菜单中选择Tools → Deployment → Upload to MyRemoteServer，确保新目录C:\xampp\htdocs已经在服务器上顺利创建。

　　另一种方式可以通过右击文件，在快捷菜单中进行操作。当然二者都需要通过Upload to MyRemoteServer命令来完成。

　　12、调试

　　13、开始调试

　　开始调试后，将会在浏览器中显示你的HTML页面，同时调试窗口 Debug tool window开启。应有程序会在命中第一个断点的时候停止，并用蓝色标记代码行：

　　更多有关断点的信息参见product documentation中的Breakpoints部分。

　　对应用程序进行更为深入的调试，相关的调试信息会显示在调试窗口以及浏览器上：

　　单击和控制代码的调试进程，通过关闭黄色标志或者单价Cancel按钮来终止调试。

document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)

    <div id="digg" articleid="50221825">
        <dl class="digg digg_enable" id="btnDigg" onclick="btndigga();">

             <dt>顶</dt>
            <dd>0</dd>
        </dl>


        <dl class="digg digg_enable" id="btnBury" onclick="btnburya();">

              <dt>踩</dt>
            <dd>0</dd>               
        </dl>

    </div>
 <div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank">&nbsp;</a>   </div>
<div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank">&nbsp;</a></div>
<script type="text/javascript">
    function btndigga() {
        $(".tracking-ad[data-mod='popu_222'] a").click();
    }
    function btnburya() {
        $(".tracking-ad[data-mod='popu_223'] a").click();
    }
        </script>