{"id":455,"date":"2016-06-05T12:48:18","date_gmt":"2016-06-05T04:48:18","guid":{"rendered":"http:\/\/goyuwei.com\/blog\/?p=455"},"modified":"2016-06-05T14:22:42","modified_gmt":"2016-06-05T06:22:42","slug":"05062016-index-3-0-bootstrap-debug-%e4%b8%bb%e9%a1%b53-0%e7%89%88%e6%9c%ac%e5%92%8cbootstrap%e6%a1%86%e6%9e%b6%e4%bb%a5%e5%8f%8adebug","status":"publish","type":"post","link":"https:\/\/goyuwei.com\/blog\/?p=455","title":{"rendered":"05\/06\/2016 \u2013 Index 4.0 & Bootstrap & Debug \u2013 \u4e3b\u98754.0\u7248\u672c\u548cBootstrap\u6846\u67b6\u4ee5\u53caDebug"},"content":{"rendered":"

(English version follows Chinese Part)<\/p>\n

\u7531\u4e8e\u4e4b\u524d\u51e0\u4e2a\u7248\u672c\u7684\u4e3b\u9875\u5bf9\u79fb\u52a8\u7aef\u548c\u5c0f\u5c4f\u8bbe\u5907\u90fd\u4e0d\u592a\u53cb\u597d\uff0c\u6240\u4ee5\u6211\u51b3\u5b9a\u7ed9\u4e3b\u9875\u6539\u6539\u7248\u3002\u8fd9\u56de\u91c7\u7528\u7684\u662fBootstrap\u6846\u67b6\uff0cBootstrap\u9664\u4e86\u5f00\u53d1\u5bf9\u6211\u8fd9\u6837\u7684\u5165\u95e8\u7ea7\u4eba\u58eb\u6bd4\u8f83\u7b80\u4fbf\u6613\u5b66\uff0c\u6d4f\u89c8\u5668\u517c\u5bb9\u6027\u548c\u79fb\u52a8\u8bbe\u5907\u517c\u5bb9\u6027\u4e5f\u662f\u4f18\u70b9\u3002<\/p>\n

The old version index pages were not friendly to mobile devices and small screen devices. So I decide to update the index page just after the 1st anniversary of my website. It is base on Bootstrap, a frame that is easy to learn for code\u00a0rookie like me. And the point is,\u00a0Bootstrap is suit for PC and most mobile devices.<\/p>\n

\u6211\u4f7f\u7528\u7684\u662fPingendo\u5de5\u5177\uff0c\u4e00\u4e2a\u53ef\u89c6\u5316\u7684\u7f51\u9875\u521b\u5efa\u5de5\u5177\uff0c\u5b98\u7f51\u662fhttp:\/\/pingendo.com\/<\/a><\/p>\n

My tool is\u00a0Pingendo, a\u00a0visualized webpage builder. Official web site :http:\/\/pingendo.com\/<\/a><\/p>\n

\u7b80\u5355\u8bbe\u8ba1\u4e00\u4e0b\uff08\u672c\u6765\u6211\u7684\u4e3b\u9875\u4e5f\u4e0d\u590d\u6742\uff0c\u5c31\u662f\u4e00\u822c\u7684\u5bfc\u822a\u9875\u800c\u5df2\uff09\uff0c\u5c31\u7531Pingendo\u81ea\u52a8\u5bfc\u51fahtml\u548ccss\u4e86\u3002<\/p>\n

My index page is not\u00a0gaudy. It took little time to rebuild it in\u00a0Pingendo, then\u00a0export the html and css files automatically.<\/p>\n

\u672c\u5730\u6253\u5f00\u6ca1\u95ee\u9898\uff0c\u4e0a\u4f20\u5230\u670d\u52a1\u5668\u4ee5\u540e\u7528Chrome\u6253\u5f00\u4e5f\u6ca1\u95ee\u9898\u3002\u6548\u679c\u5982\u56fe1\u3002<\/p>\n

Loading the local files was a success. And it was still OK when I visit the page by Chrome after uploading to the server. Just like Fig.1.<\/p>\n

\"20160605-index3<\/a><\/p>\n

\u56fe.1(Fig.1)<\/p>\n

\u53ef\u662f\uff0c\u5f53\u6211\u7528\u706b\u72d0\u6d4f\u89c8\u5668\u6253\u5f00\u4ee5\u540e\uff0cBoom\uff01\u5982\u56fe2\u3002<\/p>\n

However, when I use the Firefox, Boom! Check Fig.2.<\/p>\n

\"20160605-index3<\/a><\/p>\n

\u56fe.2(Fig.2)<\/p>\n

\u6211\u5c31\u4e0d\u660e\u767d\u4e86\uff0c\u7528Chrome\u548cIE\u90fd\u53ef\u4ee5\u8f7d\u5165\uff0c\u504f\u504f\u706b\u72d0\u4e0d\u884c\uff1f\uff01\u4e00\u5f00\u59cb\u6211\u4ee5\u4e3a\u662f\u706b\u72d0\u5bf9Bootstrap\u517c\u5bb9\u6027\u95ee\u9898\uff0c\u53c8\u6000\u7591\u662f\u670d\u52a1\u5668\u95ee\u9898\u2026\u2026\u6211\u5c31\u8ba9\u4e00\u4f4d\u670b\u53cb\u7528\u4ed6\u7684\u706b\u72d0\u6253\u5f00\u8bd5\u8bd5\uff0c\u7ed3\u679c\u6ca1\u95ee\u9898\uff1f\uff01\u56e0\u4e3a\u4ed6\u662f\u4fe1\u606f\u884c\u4e1a\u4e1a\u5185\u4eba\u58eb\uff0c\u4ed6\u544a\u8bc9\u6211\u4ed6\u7528\u7684\u662f\u5f00\u53d1\u8005\u7248\u706b\u72d0\uff0c\u800c\u4e14\u63a7\u5236\u53f0\u663e\u793a\u6709bug\uff0c\u5c31\u8ba9\u6211\u81ea\u5df1\u770b\u770bbug\u662f\u4ec0\u4e48\uff0c\u7136\u800c\u6211\u53d1\u73b0\u666e\u901a\u7248\u706b\u72d0\u5e76\u6ca1\u6709\u7c7b\u4f3c\u529f\u80fd\uff0c\u5c31\u88c5\u4e86\u4e2afirebug\u7ec4\u4ef6\u3002\u4e00\u5237\u65b0\u2026\u2026\u62a5\u9519\u51fa\u73b0\uff01\u5982\u56fe3\u3002<\/p>\n

I did not get it, only Firefox report error when Chrome and IE can load the page?! I considered that the problems of\u00a0compatibility between Firefox and\u00a0Bootstrap. And maybe it was a server’s error ? I asked one of my friends who works in information enterprise to visit the page with his Firefox. Not thing wrong! Then he told me about his Firefox Developer Edition and teach me to find the bug with firebug. The bugs were listed in firebug as fig.3!<\/p>\n

\"20160605-index3<\/a><\/p>\n

\u56fe.3(Fig.3)<\/p>\n

\u7adf\u7136\u662f\u2018\\\u2019\u548c\u2018\/\u2019\u5199\u53cd\u4e86\uff01\u8fdb\u6e90\u7801\u4e00\u770b\uff0c\u95ee\u9898\u51fa\u5728\u8fd9\uff1a<\/p>\n

Seriously? A simple code writing mistake between ‘\/’ and ‘\\’ ? ! Check the\u00a0source code :<\/p>\n

[html]<\/p>\n

<link href="css\\default.css" rel="stylesheet" type="text\/css"><\/p>\n

\u2026\u2026<\/p>\n

<img src="img\\profile.png" class="center-block img-responsive"><\/p>\n

[\/html]<\/p>\n

\u8fd9\u4e24\u6bb5\u4ee3\u7801\u5c31\u4e0d\u662f\u6211\u81ea\u5df1\u5199\u7684\u554a\uff01\u662fPingendo\u81ea\u52a8\u751f\u6210\u7684\u554a\uff01\u8fd9\u4e2a\u9505\u6211\u4e0d\u80cc\u2026\u2026<\/p>\n

These code were written by myself ! They are original code exported by Pingendo automatically!<\/p>\n

\u6240\u4ee5\u51faBug\u7684\u6839\u672c\u539f\u56e0\u5c31\u662f\uff1acss\u548cimg\u6587\u4ef6\u8def\u5f84\u9519\u8bef\uff0c\u706b\u72d0\u5728\u8bbf\u95ee\u8fd9\u4e24\u4e2a\u6587\u4ef6\u5931\u8d25\uff0c\u5bfc\u81f4\u53ea\u80fd\u663e\u793ahtml\u4fe1\u606f\u3002<\/p>\n

So the problem is that: wrong path of .css and img file, which result in the failure of page resource \u00a0loading.<\/p>\n

Debug\u4ee5\u540e\u5c31\u5b8c\u5168\u6ca1\u95ee\u9898\u4e86\u3002<\/p>\n

It all right after debug.<\/p>\n

\u4e0d\u8fc7\u6709\u4e2a\u5730\u65b9\u503c\u5f97\u6ce8\u610f\uff0c\u5c31\u662fbug\u8fd8\u5b58\u5728\u7684\u65f6\u5019Chrome\u548cIE\uff08IE11\uff09\u8fd8\u6709\u706b\u72d0\u5f00\u53d1\u8005\u7248\u662f\u53ef\u4ee5\u6b63\u5e38\u6253\u5f00\u7684\uff0c\u8bf4\u660e\u5b83\u4eec\u90fd\u81ea\u5e26\u81ea\u52a8\u7ea0\u6b63\u4e00\u7c7b\u7684\u529f\u80fd\u3002<\/p>\n

Notabily, Chrome and IE can load the page successfully alone with the bug, it proves the function of automatic\u00a0code correction.<\/p>\n

\u5176\u5b9e\uff0c\u9664\u4e86\u8fd9\u4e00\u70b9\u5c0f\u5c0f\u7684bug\uff0cPingendo\u5de5\u5177\u8fd8\u662f\u5f88\u597d\u7528\u7684\uff0c\u5c24\u5176\u662f\u53ef\u89c6\u5316\u7684\u7f16\u8f91\u754c\u9762\u5bf9\u53ea\u9700\u8981\u7b80\u5355\u9875\u9762\u7f16\u8f91\u7684\u7ad9\u957f\u975e\u5e38\u53cb\u597d\u3002<\/p>\n

Despite the little bug I met, \u00a0Pingendo is an excellent tool for rookie\u00a0developer ,\u00a0especially the visualized\u00a0interface is so friendly to junior developer.<\/p>\n

\u6700\u540e\uff0c\u795d\u8d3a\u4e00\u4e0b\u4e3b\u98754.0\u7248\u672c\u6b63\u5f0f\u4e0a\u7ebf\uff01<\/p>\n

Cheers for\u00a0the launching of index 4.0!<\/p>\n","protected":false},"excerpt":{"rendered":"

(English version follows Chinese Part) \u7531\u4e8e\u4e4b\u524d\u51e0\u4e2a\u7248\u672c\u7684\u4e3b\u9875\u5bf9\u79fb\u52a8\u7aef\u548c … \u7ee7\u7eed\u9605\u8bfb05\/06\/2016 \u2013 Index 4.0 & Bootstrap & Debug \u2013 \u4e3b\u98754.0\u7248\u672c\u548cBootstrap\u6846\u67b6\u4ee5\u53caDebug<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"aside","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-455","post","type-post","status-publish","format-aside","hentry","category-site-construction-","post_format-post-format-aside"],"_links":{"self":[{"href":"https:\/\/goyuwei.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/455","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/goyuwei.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/goyuwei.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/goyuwei.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/goyuwei.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=455"}],"version-history":[{"count":0,"href":"https:\/\/goyuwei.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/455\/revisions"}],"wp:attachment":[{"href":"https:\/\/goyuwei.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/goyuwei.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/goyuwei.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}