ওয়েব ডিজাইনার, ডেভেলপার এবং পরীক্ষকদের জন্য ইন্টিগ্রেটেড টুলস
ওয়েব ব্রাউজ করার লক্ষ্যে প্রতিদিন ব্যবহারকারীর উপর মনোযোগ কেন্দ্রীভূত করে এমন বেশিরভাগ ব্রাউজারের পাশাপাশি তারা ওয়েব ডেভেলপার, ডিজাইনার এবং মানসম্মত নিশ্চয়তা পেশায় অংশীদারদের সহায়তা করে যারা এই ব্যবহারকারীদের অ্যাক্সেস এবং সাইটগুলিকে শক্তিশালী করার জন্য ব্রাউজারে শক্তিশালী সরঞ্জামগুলিকে একত্রিত করে অ্যাক্সেস করতে সহায়তা করে নিজেদের.
যেদিনগুলিতে ব্রাউজারের মধ্যে পাওয়া একমাত্র প্রোগ্রামিং এবং পরীক্ষার সরঞ্জামগুলি আপনাকে পৃষ্ঠাটির সোর্স কোড দেখতে এবং আরো কিছুই না দেখার অনুমতি দেয় আজকের ব্রাউজারগুলি আপনাকে জাভাস্ক্রিপ্ট স্নিপেটগুলি চালানোর এবং ডিবাগ করার মত বিষয়গুলি করে, ডম উপাদানের পরিদর্শন এবং সম্পাদন করা, রিয়েল-টাইম নেটওয়ার্ক ট্র্যাফিকের পর্যবেক্ষণ করে আপনার অ্যাপ্লিকেশন বা পৃষ্ঠার লোডগুলিকে ট্রলিলেকে সনাক্ত করার জন্য, CSS পারফরম্যান্স বিশ্লেষণ করে, আপনার কোডটি অনেক মেমরি বা অনেক CPU চক্র ব্যবহার না, এবং আরো অনেক কিছু একটি পরীক্ষণের দৃষ্টিকোণ থেকে, আপনি প্রতিক্রিয়া জানাতে পারেন যে একটি প্রতিক্রিয়াশীল ডিজাইন এবং বিল্ট-ইন সিমুলেটরগুলির মাধ্যমে বিভিন্ন ডিভাইস এবং প্ল্যাটফর্মে বিভিন্ন ব্রাউজারে একটি অ্যাপ্লিকেশন বা ওয়েব পৃষ্ঠা কীভাবে উপস্থাপিত হবে। সেরা অংশ হল যে আপনি আপনার ব্রাউজার ছেড়ে ছাড়াই এই সব করতে পারেন!
নীচের টিউটোরিয়ালগুলি কয়েকটি জনপ্রিয় ওয়েব ব্রাউজারে এই বিকাশকারী সরঞ্জামগুলি অ্যাক্সেস করার পদ্ধতি সম্পর্কে আপনাকে অনুসরণ করে।
গুগল ক্রম
ক্রোমের ডেভেলপার সরঞ্জামগুলি আপনাকে কোড সম্পাদনা এবং ডিবাগ করার অনুমতি দেয়, পারফরম্যান্স সমস্যাগুলি প্রকাশ করতে পৃথক সামগ্রী নিরীক্ষা করে, যারা Android বা iOS চালিত বিভিন্ন ডিভাইসের স্ক্রলগুলি অনুকরণ করে এবং অন্যান্য বেশ কিছু দরকারী কার্য সম্পাদন করে।
- ক্রোমের প্রধান মেনু বোতামে ক্লিক করুন, তিনটি অনুভূমিক লাইন দিয়ে চিহ্নিত এবং ব্রাউজারের উপরের ডানদিকের কোণায় অবস্থিত।
- যখন ড্রপ-ডাউন মেনু প্রদর্শিত হবে, আপনার সরঞ্জামগুলি আরও টুলের উপরে মাউস কার্সার রাখো।
- একটি উপমেনু এখন প্রদর্শিত হবে। বিকাশকারী সরঞ্জাম লেবেল বিকল্প নির্বাচন করুন। আপনি এই মেনু আইটেমের পরিবর্তে নিম্নলিখিত কীবোর্ড শর্টকাটটি ব্যবহার করতে পারেন: Chrome OS / Windows ( CTRL + SHIFT + I ), ম্যাক ওএস এক্স ( ALT (OPTION) + COMMAND + I )
- এই উদাহরণ স্ক্রিনশট হিসাবে দেখানো হয়েছে, এখন Chrome বিকাশকারী সরঞ্জাম ইন্টারফেস প্রদর্শিত হবে। আপনার Chrome এর সংস্করণের উপর ভিত্তি করে, আপনি যে প্রারম্ভিক লেআউটটি দেখেন তা এখানে উপস্থাপন করা থেকে আলাদা হতে পারে। বিকাশকারী সরঞ্জামগুলির মূল হাব, সাধারণত পর্দার নীচের বা ডানদিকে অবস্থিত, নিম্নোক্ত ট্যাবগুলি রয়েছে।
উপাদানসমূহ: সিএসএস এবং এইচটিএমএল কোড নিরীক্ষণের পাশাপাশি সিএসএস অন-ফ্লাই সম্পাদনা করুন, রিয়েল টাইমে আপনার পরিবর্তনগুলির প্রভাব দেখে।
কনসোল: Chrome এর জাভাস্ক্রিপ্ট কনসোল সরাসরি কমান্ড এন্ট্রির পাশাপাশি ডায়গনিস্টিক ডিবাগিংয়ের জন্যও অনুমতি দেয়।
সোর্স: আপনাকে একটি শক্তিশালী গ্রাফিকাল ইন্টারফেসের মাধ্যমে JavaScript কোডটি ডিবাগ করতে দেয়।
নেটওয়ার্ক: সম্পূর্ণ অনুরোধ এবং প্রতিক্রিয়া শিরোনাম সহ উন্নত সময়জ্ঞান ম্যাট্রিক্স সহ সক্রিয় অ্যাপ্লিকেশন বা পৃষ্ঠায় প্রতিটি সংশ্লিষ্ট অপারেশন সম্পর্কে বিস্তারিত তথ্য শ্রেণীবিভাগ করে এবং প্রদর্শন করে।
সময়রেখা: যত তাড়াতাড়ি একটি পৃষ্ঠা বা অ্যাপ্লিকেশন লোড অনুরোধ শুরু হয় ব্রাউজারের মধ্যে সঞ্চালিত যে প্রত্যেক কার্যকলাপের গভীর বিশ্লেষণের জন্য অনুমতি দেয়। - এই বিভাগগুলি ছাড়াও, আপনি টার্মিনাল ট্যাবের ডান দিকে অবস্থিত আইকনটির মাধ্যমে নিম্নলিখিত সরঞ্জামগুলি অ্যাক্সেস করতে পারেন।
প্রোফাইল: সিপিইউ প্রোফিলার এবং হিপ প্রোফাইলার বিভাগে টুকরো টুকরো করে, সক্রিয় মেমরি ব্যবহারের এবং সক্রিয় অ্যাপ্লিকেশন বা পেজের সম্পূর্ণ এক্সিকিউশন সময় প্রদান করে।
নিরাপত্তা: সক্রিয় পৃষ্ঠা বা অ্যাপ্লিকেশনের সাথে শংসাপত্র সমস্যাগুলি এবং অন্যান্য নিরাপত্তা সংক্রান্ত সমস্যাগুলিকে হাইলাইট করে।
সম্পদ: এটি হল যেখানে আপনি কুকিজ, স্থানীয় সঞ্চয়স্থান, অ্যাপ্লিকেশন ক্যাশ এবং বর্তমান ওয়েব পৃষ্ঠা বা অ্যাপ্লিকেশান দ্বারা ব্যবহৃত অন্যান্য স্থানীয় তথ্য সূত্র পরিদর্শন করতে পারেন।
অডিটিস: একটি পৃষ্ঠা বা অ্যাপ্লিকেশনের লোড টাইম এবং সাধারণ পারফরম্যান্সকে অপ্টিমাইজ করার উপায়গুলি অফার করে। - ডিভাইস মোডটি আপনাকে সক্রিয় পৃষ্ঠাটি একটি সিমুলেটর দেখতে দেয় যা এটি প্রায় ঠিকভাবে উপস্থাপিত করে যেমনটি বেশ কয়েকটি সুপরিচিত অ্যানড্রয়েড ও আইওএস মডেল যেমন আইপ্যাড, আইফোন এবং স্যামসাং গ্যালাক্সি সহ প্রদর্শিত হবে। আপনার বিশেষ উন্নয়ন বা পরীক্ষার প্রয়োজনীয়তাগুলি মাপার জন্য কাস্টম স্ক্রিন রেজুলেশনগুলির অনুকরণ করার ক্ষমতা আপনাকে দেওয়া হয়। ডিভাইস মোড চালু এবং বন্ধ করতে, এলিমেন্টস ট্যাবের বামে সরাসরি অবস্থিত মোবাইল ফোন আইকন নির্বাচন করুন।
- আপনি আপনার বিকাশকারী সরঞ্জামগুলির চেহারা এবং অনুভূতিটি কাস্টমাইজ করতে পারেন, প্রথমে মেনু বোতামটি তিনটি উল্লম্বভাবে স্থাপন করা ডটগুলির উপর ক্লিক করে এবং পূর্বে উল্লিখিত ট্যাবগুলির ডানদিকের দিকে অবস্থিত দ্বারা প্রদর্শিত। এই ড্রপ ডাউন মেনু থেকে, আপনি ডক পুনঃস্থাপন করতে পারেন, বিভিন্ন সরঞ্জামগুলি দেখান বা লুকিয়ে রাখতে পারেন এবং সাথে সাথে আরও উন্নত আইটেম যেমন ডিভাইস ইন্সপেক্টর চালু করতে পারেন। আপনি এই সরঞ্জামে পাওয়া সেটিংস মাধ্যমে dev সরঞ্জাম ইন্টারফেস নিজেই উচ্চ কাস্টমাইজড যে এটি পাবেন।
মোজিলা ফায়ারফক্স
ফায়ারফক্সের ওয়েব ডেভেলপার বিভাগে ডিজাইনার, ডেভেলপার এবং পরীক্ষকগণের জন্য সরঞ্জাম যেমন একটি স্টাইল এডিটর এবং পিক্সেল-টার্গেটিং আইড্রপেরর সরঞ্জাম রয়েছে।
প্রস্তাবিত পঠন: শীর্ষ 25 Greasemonkey এবং Tampermonkey ব্যবহারকারী স্ক্রিপ্ট
- ফায়ারফক্স এর প্রধান মেনু বোতামে ক্লিক করুন, তিনটি অনুভূমিক লাইন দ্বারা প্রতিনিধিত্ব করে এবং ব্রাউজার উইন্ডোর উপরে ডানদিকের কোণায় অবস্থিত।
- যখন ড্রপ-ডাউন মেনু প্রদর্শিত হবে, তখন বিকাশকারীর লেবেলটি আইকন নির্বাচন করুন। ওয়েব ডেভেলপার মেনুটি এখন প্রদর্শিত হবে, যার মধ্যে নিম্নলিখিত বিকল্পগুলি রয়েছে। আপনি লক্ষ্য করবেন যে অধিকাংশ মেনু আইটেম তাদের সাথে যুক্ত কীবোর্ড শর্টকাটগুলি রয়েছে।
টুল টগল করুন: ডেভেলপার টুল ইন্টারফেসগুলি প্রদর্শন করে বা লুকায়, সাধারণত ব্রাউজার উইন্ডোর নিচের দিকে অবস্থান করে। কীবোর্ড শর্টকাট: ম্যাক ওএস এক্স ( ALT (OPTION) + COMMAND + I ), উইন্ডোজ ( CTRL + SHIFT + I )
ইন্সপেক্টর: আপনি সক্রিয় পৃষ্ঠায় পাশাপাশি দূরবর্তী ডিবাগিংয়ের মাধ্যমে একটি পোর্টেবল ডিভাইসের পরিদর্শন এবং / অথবা CSS এবং HTML কোডটি পরিদর্শন করতে পারবেন। কীবোর্ড শর্টকাট: ম্যাক ওএস এক্স ( ALT (OPTION) + COMMAND + C ), উইন্ডোজ ( CTRL + SHIFT + C )
ওয়েব কনসোল: আপনাকে সক্রিয় পৃষ্ঠার মধ্যে জাভাস্ক্রিপ্ট এক্সপ্রেশন চালানোর পাশাপাশি নিরাপত্তার সতর্কতা, নেটওয়ার্ক অনুরোধ, সিএসএস মেসেজ এবং অন্যান্য সহ লগের বিভিন্ন ডেটা পর্যালোচনা করার অনুমতি দেয়। কীবোর্ড শর্টকাট: ম্যাক OS X ( ALT (OPTION) + COMMAND + K ), উইন্ডোজ ( CTRL + SHIFT + K )
ডিবাগার: জাভাস্ক্রিপ্ট ডিবাগার আপনাকে ডকুমেন্টগুলি নির্ধারণ করে, ডিএএম নোডগুলি পরীক্ষা করে, ব্ল্যাকবক্স বাইরের সূত্রগুলি এবং আরও অনেক কিছু দিয়ে ত্রুটিগুলি চিহ্নিত করে সংশোধন করতে দেয়। হিসাবে ইন্সপেক্টর সঙ্গে ক্ষেত্রে, এই বৈশিষ্ট্য এছাড়াও দূরবর্তী ডিবাগিং সমর্থন করে। কীবোর্ড শর্টকাট: ম্যাক ওএস এক্স ( ALT (OPTION) + COMMAND + S ), উইন্ডোজ ( CTRL + SHIFT + S)
স্টাইল সম্পাদক: আপনাকে নতুন স্টাইলশীট তৈরি করতে এবং সক্রিয় ওয়েব পৃষ্ঠাতে তাদের অন্তর্ভুক্ত করতে বা বিদ্যমান শীটগুলি সম্পাদনা করতে এবং আপনার ব্রাউজারে কেবলমাত্র এক ক্লিকের মাধ্যমে আপনার পরিবর্তনগুলি কীভাবে উপস্থাপিত হয় তা পরীক্ষা করার অনুমতি দেয়। কীবোর্ড শর্টকাট: ম্যাক ওএস এক্স, উইন্ডোজ ( SHIFT + F7 )
পারফরম্যান্স: সক্রিয় পৃষ্ঠার নেটওয়ার্ক কার্যকারিতা, ফ্রেম রেট ডেটা, জাভাস্ক্রিপ্ট এক্সিকিউশন সময় এবং অবস্থা, পেইন্ট ফ্ল্যাশিং, এবং আরও অনেক কিছু বিশদ বিশৃঙ্খলা প্রদান করে। কীবোর্ড শর্টকাট: ম্যাক ওএস এক্স, উইন্ডোজ ( SHIFT + F5 )
নেটওয়ার্ক: সংশ্লিষ্ট পদ্ধতি, মূল ডোমেন, প্রকার, আকার এবং সময়ের সাথে ব্রাউজার দ্বারা শুরু করা প্রতিটি নেটওয়ার্ক অনুরোধের তালিকা দেয়। কীবোর্ড শর্টকাট: ম্যাক ওএস এক্স ( ALT (OPTION) + COMMAND + Q ), উইন্ডোজ ( CTRL + SHIFT + Q )
বিকাশকারী টুলবার: একটি ইন্টারেক্টিভ কমান্ড লাইন দোভাষী খোলে সমস্ত উপলব্ধ কমান্ড এবং তাদের সঠিক সিনট্যাক্স একটি তালিকা জন্য দোভাষী মধ্যে সাহায্য লিখুন। কীবোর্ড শর্টকাট: ম্যাক ওএস এক্স, উইন্ডোজ ( SHIFT + F2 )
ওয়েবআইডি: ফায়ারফক্স ওএস বা ফায়ারফক্স ওএস সিমুলেটর ব্যবহার করে একটি প্রকৃত ডিভাইসের মাধ্যমে ওয়েব অ্যাপ তৈরি এবং চালানোর ক্ষমতা প্রদান করে। কীবোর্ড শর্টকাট: ম্যাক ওএস এক্স, উইন্ডোজ ( SHIFT + F8 )
ব্রাউজার কনসোল: ওয়েব কনসোল (উপরে দেখুন) হিসাবে একই কার্যকারিতা প্রদান করে। যাইহোক, সমস্ত ফাঁকা ফায়ারফক্স অ্যাপ্লিকেশন ( এক্সটেনশান এবং ব্রাউজার-স্তরের ফাংশনগুলি সহ) কেবলমাত্র সক্রিয় ওয়েব পৃষ্ঠাের বিরোধিতার জন্য সমস্ত ডেটা ফেরত দেওয়া হয়। কীবোর্ড শর্টকাট: ম্যাক ওএস এক্স ( SHIFT + COMMAND + J ), উইন্ডোজ ( CTRL + SHIFT + J )
প্রতিক্রিয়াশীল ডিজাইন দেখুন: আপনি ট্যাবলেট এবং স্মার্টফোন সহ একাধিক ডিভাইসের অনুকরণে বিভিন্ন রেজুলেশন, লেআউট এবং স্ক্রিন মাপের সাথে একটি ওয়েব পৃষ্ঠা তাত্ক্ষণিকভাবে দেখতে পাবেন। কীবোর্ড শর্টকাট: ম্যাক ওএস এক্স ( ALT (OPTION) + COMMAND + M ), উইন্ডোজ ( CTRL + SHIFT + M )
Eyedropper: পৃথকভাবে নির্বাচিত পিক্সেলের জন্য হেক্স রঙ কোড প্রদর্শন করে।
স্ক্র্যাচপ্যাড : আপনি একটি পপ-আউট ফায়ারফক্স উইন্ডো থেকে জাভাস্ক্রিপ্ট কোডের স্নিপেট লিখতে, সম্পাদনা করতে, সংহত করতে এবং সঞ্চালন করতে পারবেন। কীবোর্ড শর্টকাট: ম্যাক ওএস এক্স, উইন্ডোজ ( SHIFT + F4 )
পৃষ্ঠা উত্স: মূল ব্রাউজার ভিত্তিক বিকাশকারী সরঞ্জাম, এই বিকল্পটি কেবল সক্রিয় পৃষ্ঠার জন্য উপলভ্য সোর্স কোড প্রদর্শন করে। কীবোর্ড শর্টকাট: ম্যাক ওএস এক্স ( COMMAND + U ), উইন্ডোজ ( CTRL + U )
আরও সরঞ্জাম পান: মোজিলার অফিসিয়াল এড-অন সাইটটিতে ওয়েব ডেভেলপারের টুলবক্স সংগ্রহটি খোলে, ডাবর জনপ্রিয় এক্সটেনশানগুলি যেমন ফায়ারবগ এবং গ্রাসেমিনের মতো।
মাইক্রোসফ্ট এজ / ইন্টারনেট এক্সপ্লোরার
সাধারনত F12 বিকাশকারী সরঞ্জাম হিসাবে পরিচিত, ইন্টারনেট এক্সপ্লোরারের আগের সংস্করণগুলি থেকে ইন্টারফেস চালু করা হয়েছে এমন কীবোর্ড শর্টকাট থেকে একটি উপাসনা, IE11 এ ডেভেল টুলস এবং মাইক্রোসফট এজ একটি খুব সহজে গ্রুপ অফার করে তার প্রারম্ভ মনিটর, ডিবাগার, এমুলেটর, এবং অন-ফ্লাই কম্পাইলার।
- আরো ক্রিয়া মেনুতে ক্লিক করুন, যা তিনটি বিন্দুর দ্বারা প্রতিনিধিত্ব করে এবং ব্রাউজার উইন্ডোর উপরে ডানদিকের কোণায় অবস্থিত। যখন ড্রপ-ডাউন মেনু প্রদর্শিত হবে, তখন F12 বিকাশকারী সরঞ্জামগুলির লেবেলটি নির্বাচন করুন। আমি ইতিমধ্যে উল্লিখিত হিসাবে, আপনি F12 কীবোর্ড শর্টকাট মাধ্যমে সরঞ্জাম অ্যাক্সেস করতে পারেন।
- উন্নয়ন ইন্টারফেস এখন প্রদর্শিত হবে, সাধারণত ব্রাউজার উইন্ডো নীচে। নিম্নোক্ত সরঞ্জামগুলি উপলভ্য, প্রতিটি নিজ নিজ ট্যাব শিরোনাম ক্লিক করে বা সহগামী কীবোর্ড শর্টকাট ব্যবহার করে অ্যাক্সেসযোগ্য।
DOM এক্সপ্লোরার: সক্রিয় পৃষ্ঠায় আপনি স্টাইলশীট এবং এইচটিএমএল সম্পাদনা করতে পারবেন, আপনি যেমন পরিবর্তন করা ফলাফলগুলি সরবরাহ করবেন। যেখানে প্রয়োগযোগ্য কোডটি স্বয়ংসম্পূর্ণ করতে IntelliSense কার্যকারিতা ব্যবহার করে। কীবোর্ড শর্টকাট: (CTRL + 1)
কনসোল: একটি সমন্বিত API- এর মাধ্যমে কাউন্টার, টাইমার, ট্রেস এবং কাস্টমাইজড বার্তা সহ ডিবাগিং তথ্য জমা করার ক্ষমতা উপলব্ধ করে। এছাড়াও, আপনি একটি সক্রিয় ওয়েব পৃষ্ঠা কোড ইনজেকশন এবং রিয়েল টাইমে পৃথক ভেরিয়েবলের জন্য নির্ধারিত মান পরিবর্তন করতে দেয়। কীবোর্ড শর্টকাট: (CTRL + 2)
ডিবাগার: আপনাকে ব্রেকপয়েন্টগুলি সেট করতে দেয় এবং আপনার কোডটি ডিবাগ করে যখন এটি চালানো হয়, প্রয়োজন হলে লাইনের মাধ্যমে লাইন করুন। কীবোর্ড শর্টকাট: (CTRL + 3)
নেটওয়ার্ক: পৃষ্ঠা লোড এবং কার্যকরী প্রোটোকল বিশদ, সামগ্রী প্রকার, ব্যান্ডউইথ ব্যবহার, এবং আরও অনেক কিছু সহ ব্রাউজার দ্বারা চালু প্রতিটি নেটওয়ার্ক অনুরোধ তালিকা। কীবোর্ড শর্টকাট: (CTRL + 4)
পারফরম্যান্স: পৃষ্ঠা লোড টাইম এবং অন্যান্য ক্রিয়াকলাপগুলির গতি বাড়ানোর জন্য বিবরণ ফ্রেম হার, CPU ব্যবহার এবং অন্যান্য কার্য-সম্পাদন সম্পর্কিত মেট্রিকস। কীবোর্ড শর্টকাট: (CTRL + 5)
স্মৃতি: বিভিন্ন সময় অন্তর থেকে স্ন্যাপশট সহ মেমরি ব্যবহারের সময়রেখা প্রদর্শন করে আপনি বর্তমান ওয়েব পৃষ্ঠাতে সম্ভাব্য মেমরির লিকগুলিকে আলাদা এবং সংশোধন করতে সহায়তা করে। কীবোর্ড শর্টকাট: (CTRL + 6)
এমুলেশন: স্মার্টফোন, ট্যাবলেট এবং অন্যান্য ডিভাইসগুলির অনুকরণে কীভাবে সক্রিয় পৃষ্ঠাটি বিভিন্ন রেজোলিউশনে এবং স্ক্রিন মাপে উপস্থাপিত হবে তা আপনাকে দেখায়। এছাড়াও ব্যবহারকারী এজেন্ট এবং পৃষ্ঠার অবস্থান পরিবর্তন করার ক্ষমতা প্রদান করে, পাশাপাশি একটি অক্ষাংশ এবং দ্রাঘিমাংশ লিখতে বিভিন্ন ভূতত্ত্বকে অনুকরণ করে। কীবোর্ড শর্টকাট: (CTRL + 7) - কনসোল প্রদর্শন করার জন্য অন্য যেকোনো সরঞ্জামের মধ্যে এটি বামাবৃত্তাকার বামে একটি ডান বন্ধনী দিয়ে ক্লিক করুন, এটি উন্নয়ন সরঞ্জামের ইন্টারফেসের ডানদিকের উপরের কোণে অবস্থিত।
- আনকোড করার জন্য, বিকাশকারী সরঞ্জামগুলি ইন্টারফেস করে তাই এটি একটি পৃথক উইন্ডো হয়ে যায়, দুটি ক্যাশেডেড আয়তক্ষেত্র দ্বারা উপস্থাপিত বাটনটিতে ক্লিক করুন বা নিম্নলিখিত কীবোর্ড শর্টকাট ব্যবহার করুন: CTRL + P আপনি CTRL + P দ্বিতীয়বার টিপে টিপে তাদের মূল অবস্থানে ফিরে যেতে পারেন।
আপেল সাফারি (OS X শুধুমাত্র)
সাফারিের বিভিন্ন ডিভ টুল্যাট বৃহৎ ডেভেলপার সম্প্রদায়কে প্রতিফলিত করে যা তাদের ডিজাইন এবং প্রোগ্রামিং চাহিদার জন্য একটি ম্যাক ব্যবহার করে। একটি শক্তিশালী কনসোল এবং ঐতিহ্যগত লগিং এবং ডিবাগিং বৈশিষ্ট্যগুলি ছাড়াও, একটি সহজে ব্যবহারযোগ্য প্রতিক্রিয়াশীল ডিজাইন মোড এবং আপনার নিজস্ব ব্রাউজার এক্সটেনশানগুলি তৈরি করার একটি সরঞ্জামও প্রদান করা হয়।
- আপনার পর্দার শীর্ষে অবস্থিত ব্রাউজার মেনুতে Safari এ ক্লিক করুন। যখন ড্রপ ডাউন মেনু প্রদর্শিত হবে, পছন্দগুলি নির্বাচন করুন। আপনি এই মেনু আইটেমের পরিবর্তে নিম্নলিখিত কীবোর্ড শর্টকাটটি ব্যবহার করতে পারেন: COMMAND + COMMA (,)
- আপনার ব্রাউজার উইন্ডোর উপর ওভারলেিং করা উচিত Safari এর Preferences ইন্টারফেসটি এখন প্রদর্শিত হবে। হেডারের ডানদিকের ডান দিকে অবস্থিত উন্নত আইকনে ক্লিক করুন।
- উন্নত পছন্দগুলি এখন দৃশ্যমান হওয়া উচিত। এই পর্দার নীচের অংশে একটি বিকল্প বাক্স রয়েছে যা মেনু বারে প্রদর্শন করুন মেনু প্রদর্শন করে, একটি চেক বাক্স দ্বারা। বাক্সে দেখানো কোন চিহ্ন না থাকলে, সেখানে এক জায়গায় একবার ক্লিক করুন।
- লাল 'এক্স' উপর ক্লিক করে পছন্দের ইন্টারফেসটি বন্ধ করুন উপরের বাম দিকে কোণায় অবস্থিত।
- আপনি এখন বুকমার্কস এবং উইন্ডোর মধ্যে অবস্থিত বিকাশ নামে একটি ব্রাউজার মেনুতে একটি নতুন বিকল্পটি লক্ষ্য করুন । এই মেনু আইটেমটি ক্লিক করুন একটি ড্রপ ডাউন মেনুটি এখন প্রদর্শিত হবে, যার মধ্যে নিম্নলিখিত বিকল্পগুলি রয়েছে।
এই পৃষ্ঠাটি খুলুন: বর্তমানে আপনার Mac এ ইনস্টল করা অন্য ব্রাউজারগুলির মধ্যে একটি সক্রিয় ওয়েব পৃষ্ঠা খুলতে আপনাকে অনুমতি দেয়।
ব্যবহারকারীর এজেন্ট: আপনাকে Chrome, ফায়ারফক্স এবং ইন্টারনেট এক্সপ্লোরারের বিভিন্ন সংস্করণ সহ একটি ডজন পূর্বনির্ধারিত ইউজার এজেন্টের মূল্য থেকে নির্বাচন করতে দেয়, পাশাপাশি আপনার নিজস্ব কাস্টম স্ট্রিংও নির্ধারণ করে।
প্রতিক্রিয়াশীল ডিজাইন মোডটি প্রবেশ করান: বর্তমান ডিভাইসটি এটি বিভিন্ন ডিভাইসে এবং বিভিন্ন স্ক্রিন রেজুলেশনগুলিতে প্রদর্শিত হবে।
ওয়েব ইন্সপেক্টর দেখান: Safari এর dev সরঞ্জামগুলির জন্য প্রধান ইন্টারফেসটি চালু করে, সাধারণত আপনার ব্রাউজার পর্দার নিচের দিকে থাকে এবং নিম্নোক্ত বিভাগগুলি রয়েছে: এলিমেন্টস , নেটওয়ার্ক , রিসোর্স , টাইমলাইনস , ডিবাগার , স্টোরেজ , কনসোল ।
ত্রুটি কনসোল দেখান: এছাড়াও ডিভাস টুল ইন্টারফেসটি চালু করে, সরাসরি কনসোল ট্যাবে যা ত্রুটিগুলি, সতর্কবার্তা এবং অন্যান্য অনুসন্ধানযোগ্য লগ ডেটা দেখায়।
পৃষ্ঠা উৎস দেখান: সম্পদ ট্যাব খোলে, যা ডকুমেন্ট দ্বারা শ্রেণিত সক্রিয় পৃষ্ঠার উৎস কোড প্রদর্শন করে।
পৃষ্ঠা সম্পদ দেখান: প্রদর্শন পৃষ্ঠা উত্স বিকল্প হিসাবে একই ফাংশন সঞ্চালিত।
স্নিপেট সম্পাদক দেখান: একটি নতুন উইন্ডো খোলে যেখানে আপনি সিএসএস এবং এইচটিএমএল কোড লিখতে পারেন, এই ফ্লাইং এর আউটপুট দেখার পূর্বের।
এক্সটেনশন বিল্ডার দেখান: সিএসএস, এইচটিএমএল এবং জাভাস্ক্রিপ্টের সাথে Safari এক্সটেনশন তৈরি বা সম্পাদনা করার ক্ষমতা উপলব্ধ করে।
সময়রেখা রেকর্ডিং দেখান: টাইমলাইন ট্যাব খোলে এবং নেটওয়ার্ক অনুরোধ, লেআউট এবং রেন্ডারিং তথ্য প্রদর্শন করা এবং পাশাপাশি জাভাস্ক্রিপ্ট বাস্তবায়নের সময় শুরু।
খালি ক্যাশে: বর্তমানে আপনার হার্ড ড্রাইভে সঞ্চিত সমস্ত ক্যাশে মুছে ফেলে।
ক্যাশে অক্ষম করুন: ক্যাশে থেকে সাফারি স্টপ যাতে সমস্ত কন্টেন্ট সার্ভার থেকে প্রতিটি পৃষ্ঠার লোড থেকে উদ্ধার করা হয়।
চিত্রগুলি অক্ষম করুন: সব ওয়েব পৃষ্ঠাগুলি রেন্ডারিং থেকে চিত্রগুলি প্রতিরোধ করে।
স্টাইলগুলি নিষ্ক্রিয় করুন: যখন কোনো পৃষ্ঠা লোড হয় তখন CSS বৈশিষ্ট্যাবলীগুলিকে উপেক্ষা করে।
জাভাস্ক্রিপ্ট অক্ষম করুন: সব পৃষ্ঠাগুলিতে জাভাস্ক্রিপ্ট এক্সিকিউট নিয়ন্ত্রণ করে।
এক্সটেনশান অক্ষম করুন: ব্রাউজারের মধ্যে চলার সমস্ত ইনস্টল করা এক্সটেনশনগুলিকে নিষিদ্ধ করুন ।
সাইট-নির্দিষ্ট হ্যাক নিষ্ক্রিয় করুন: যদি সাফারিকে সক্রিয় ওয়েব পৃষ্ঠাতে স্পষ্টভাবে ইস্যু (গুলি) সুনির্দিষ্টভাবে সংশোধন করার জন্য সংশোধন করা হয়েছে, তবে এই বিকল্পটি সেই পরিবর্তনগুলিকে অবরুদ্ধ করবে যাতে পৃষ্ঠা লোডগুলি এই সংশোধনের পূর্বে যেসব পরিবর্তনগুলি চালু হয় তা অবরুদ্ধ করে দিতে পারে।
স্থানীয় ফাইল নিষ্ক্রিয়তা অক্ষম করুন: ব্রাউজারকে আপনার স্থানীয় ডিস্কের ফাইলগুলিতে অ্যাক্সেস করার অনুমতি দেয়, এমন একটি ক্রিয়া যা নিরাপত্তার কারণে ডিফল্টভাবে সীমাবদ্ধ।
ক্রস-অরিজিন সীমাবদ্ধতা অক্ষম করুন: XSS এবং অন্যান্য সম্ভাব্য বিপদগুলি প্রতিরোধ করার জন্য ডিফল্টভাবে এই নিষেধাজ্ঞাগুলি স্থানান্তর করা হয় যাইহোক, তারা প্রায়ই উন্নয়ন উদ্দেশ্যে অস্থায়ীভাবে অক্ষম করা প্রয়োজন।
স্মার্ট অনুসন্ধান ক্ষেত্র থেকে জাভাস্ক্রিপ্টের অনুমতি দিন: সক্রিয় করা হলে, জাভাস্ক্রিপ্টের URL গুলিতে প্রবেশ করার ক্ষমতা প্রদান করে : ঠিক ঠিকানা দণ্ডে অন্তর্ভুক্ত করা হয়েছে
SHA-1 শংসাপত্রগুলিকে অস্থির হিসাবে বিবেচনা করুন: SHA-1 অ্যালগরিদম ব্যবহার করে SSL সার্টিফিকেটগুলি বহির্বিশ্বে এবং অপ্রতুল বলে বিবেচিত হয়।